React Search Params

This library is a little enhancement of the hook useSearchParams in React Router 6

Dependencies

• React 18
• React Router 6

How to install

In the project directory, you can run:

npm i react-search-params

or

yarn add react-search-params

How to use

Import library:

import { useReactSearchParams } from "react-search-params";

Hook init:

function MyComponent() {

  const { search, setSearch } = useReactSearchParams();
  
  // rest of your code
}

/**
 * 
 * Output:
 * http://localhost:3000/?foo=bar
 * 
 */

Set params:

const { setSearch } = useReactSearchParams();
setSearch({ foo: "bar" })

// Output
// http://localhost:3000/?foo=bar

Get params:

// Given an URL
// http://localhost:3000/?foo=bar

const { search } = useReactSearchParams();

console.log(search.toString());
// Output
// foo=bar


console.log(search.get("foo"));
// Output
// bar

console.log(search.has("foo"));
// Output
// true

search.forEach((value, key) => {
  console.log(key, value)
});
// Output
// foo bar