@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
Installation
npm install @location-state/core @location-state/next
yarn add @location-state/core @location-state/next
pnpm add @location-state/core @location-state/next
Configuration
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 (
<LocationStateProvider syncer={syncer}>
<Component {...pageProps} />
</LocationStateProvider>
);
}
Working with state
import { useLocationState } from "@location-state/core";
export function Counter() {
const [counter, setCounter] = useLocationState({
name: "counter",
defaultValue: 0,
storeName: "session",
});
return (
<div>
<p>counter: <b>{counter}</b></p>
<button onClick={() => setCounter(counter + 1)}>increment</button>
</div>
);
}
API
View the API reference here.