react-router-state

React state api which append value to quey params

Preview

Open this example on StackBlitz:

Installation

Using npm:

1npm install react-router-state

Or using yarn:

1yarn add react-router-state

API

const [value, setValue] = useQueryState(key, defaultValue)

Name	Type	Description
defaultValue	string	default state value
key	string	param key to append to the url
value	string	current value
setValue	React.Dispatch<React.SetStateAction>	set state value

Example

1import { useQueryState } from 'react-router-state';
2
3export default function () => {
4    const [value, setValue] = useQueryState("name", "john");
5
6    return (
7        <div>
8            <h1>Name query param: ${value}</h1>
9            <button onClick={() => setValue("amin")} >
10            click to change name query parameter
11            </button>
12        </div>
13    )
14}
15

Use cases

There are some cases that you want to have a persistance state when you share a url of you web application to someone else. For example you click on a button which opens a modal and you want to share the link and the modal should be open once the app is loaded. use can do something like this example:

1const [isOpen, setIsOpen] = useQueryState("isModalOpen", "false");
2
3return (
4  <div>
5    <button onClick={() => setIsOpen("true")}>click to open modal</button>
6    <Modal isOpen={isOpen} onClose={() => setIsOpen("false")} />
7  </div>
8);