Skip to content

react-qstate: A react hook that allows the state to be saved in the URL

License

Notifications You must be signed in to change notification settings

vclemenzi/react-qstate

Repository files navigation

React Query State

react-qstate is a simple library that allows states to be saved in url parameters. The benefits can be various:

  • Have the exactly same UI
    • A user can share the link on social and whoever clicks on it will have the same ui
    • Can be saved as a bookmark and will bring back to the same UI
  • You can use the "back" button to go back through the states
  • It can help search engine optimization
  • and more...

Installation

You can install it with your favorite package manger

npm install react-qstate
pnpm add react-qstate
yarn add react-qstate
bun add react-qstate

Usage

Its use is very simple and familiar with the existing useState hook

import { useQueryState } from "react-qstate";

function App() {
  const [count, setCount] = useQueryState("counter", 0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

About

react-qstate: A react hook that allows the state to be saved in the URL

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published