react-url-search-state-adapter-react-router-dom-v7

react-router v7 adapter for react-url-search-state.

Install

npm install react-url-search-state@alpha react-url-search-state-adapter-react-router-dom-v7@alpha

Peer dependency: react-router-dom@^7.6.2

Setup

Wrap your app with SearchStateProvider inside a route tree:

import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
import { SearchStateProvider } from "react-url-search-state";
import { useReactRouterDomV7Adapter } from "react-url-search-state-adapter-react-router-dom-v7";

function Root() {
  return (
    <SearchStateProvider adapter={useReactRouterDomV7Adapter}>
      <Outlet />
    </SearchStateProvider>
  );
}

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [{ index: true, element: <Home /> }],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />
);

Usage

See the main documentation for the full API reference.

License

MIT