@location-state/next


State management library for React that synchronizes with history location supporting Next.js Pages Router.

Features

- Manage the state to synchronize with the history location.
- By default, supports Session Storage and URL as persistent destinations.

Packages

- @location-state/core: Framework agnostic, but for Next.js App Router.
- @location-state/next: For Next.js Pages Router.

Quickstart for Next.js Pages Router

$3

``sh
npm install @location-state/core @location-state/next


or

yarn add @location-state/core @location-state/next

or

pnpm add @location-state/core @location-state/next
`

$3

`tsx
// src/pages/_app.tsx
import { LocationStateProvider } from "@location-state/core";
import { useNextPagesSyncer } from "@location-state/next";
import type { AppProps } from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {
const syncer = useNextPagesSyncer();
return (



);
}
`

$3

`tsx
import { useLocationState } from "@location-state/core";

export function Counter() {
const [counter, setCounter] = useLocationState({
name: "counter",
defaultValue: 0,
storeName: "session",
});

return (



);
}
``

API

View the API reference here.