DEV Community: Rafael Borges

How set, get and delete URL Params using React

Rafael Borges — Thu, 27 Jun 2024 19:55:53 +0000

Setting the URL Params:

import { useSearchParams } from 'react-router-dom'

//startar the variable params
const [searchParams, setSearchParams] = useSearchParams()

setSearchParams((state) => {
  state.set('order', '123')

  return state
})

Geting URL Params:

Accessing the route: http://localhost:5173/dashboard?order=123

We get this param like at example bellow:

import { useSearchParams } from 'react-router-dom'

//startar the variable params
const [searchParams, setSearchParams] = useSearchParams()

//Get the param defined
const orderId = searchParams.get('order')

Deleting URL Params:

import { useSearchParams } from 'react-router-dom'

//startar the variable params
const [searchParams, setSearchParams] = useSearchParams()

//Delete the param order
setSearchParams((state) => {
  state.delete('order')

  return state
})

Not allow user click to back to before page through button of navigator with React

Rafael Borges — Thu, 27 Jun 2024 19:05:12 +0000

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()

navigate('/sign-in', { replace: true })

Using replace true, the browser not allow back to back page after to navigate to sign-in route, how the example.

How to create a dynamic, smooth-scrolling menu

Rafael Borges — Thu, 20 Jul 2023 19:27:58 +0000

I am using react but is possible to use in all projects that use javascript how language.

To achieve this effect, you can implement a container div that splits the screen into sections with Id in each element:

//create a page

      <div className="container">
        <div className="content">
          <div id="Profile">
           <h1>Profile Content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
          </div>
          <div id="ExperiencesContainer">
            <h1>Experiences Content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
          </div>
          <div id="AboutMe">
            <h2>About me</h2>
            <h3>I work with what I love</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
          </div>
        </div>
      </div>

Our HTML Menu could be:

<div className="containerMenu">
                <button onClick={() => handleNavigateMenu('Profile')}>Profile</Tab>
                <button onClick={() => handleNavigateMenu('AboutMe')}>About me</Tab>
                <button onClick={() => handleNavigateMenu('Experiences')}>Experiences</Tab>
</div>

and this function from onClick:

//define this interface to use menu items without errors when call function handleNavigateMenu
export interface IMenuItems {
    items:
    | 'Profile'
    | 'Experiences'
    | 'AboutMe'
}

const handleNavigateMenu = (menuItems: IMenuItems['items']) => {

  const element = document.getElementById(menuItems) //created a element
  if(element) {
    element.scrollIntoView({ behavior: 'smooth' }) //scrolling to element
  }
}

How to compile styled-components on Next.js

Rafael Borges — Sun, 02 Jul 2023 17:45:09 +0000

if you are getting problem losing all the style from page, in the moment you render the application.

You just keep next.config.js file as the exemple, adding the code:

  compiler: {
    styledComponents: true,
  },

if you dont have this file on the projet, create it as the exemple.

Add this code:

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig