State management library for React that synchronizes with history location supporting Next.js App Router.
- Manage the state to synchronize with the history location.
- By default, supports Session Storage and URL as persistent destinations.
- @location-state/core: Framework agnostic, but for Next.js App Router.
- @location-state/next: For Next.js Pages Router.
- @location-state/conform: For conform.
Quickstart for Next.js App Router
npm install @location-state/core
# or
yarn add @location-state/core
# or
pnpm add @location-state/core// src/app/Providers.tsx
"use client";
import { LocationStateProvider } from "@location-state/core";
export function Providers({ children }: { children: React.ReactNode }) {
return <LocationStateProvider>{children}</LocationStateProvider>;
}// src/app/layout.tsx
import { Providers } from "./Providers";
// ...snip...
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}"use client";
import { useLocationState } from "@location-state/core";
export function Counter() {
const [counter, setCounter] = useLocationState({
name: "counter",
defaultValue: 0,
storeName: "session",
});
return (
<div>
<p>
storeName: <b>{storeName}</b>, counter: <b>{counter}</b>
</p>
<button onClick={() => setCounter(counter + 1)}>increment</button>
</div>
);
}Quickstart for Page Router
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// 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 (
<LocationStateProvider syncer={syncer}>
<Component {...pageProps} />
</LocationStateProvider>
);
}import { useLocationState } from "@location-state/core";
export function Counter() {
const [counter, setCounter] = useLocationState({
name: "counter",
defaultValue: 0,
storeName: "session",
});
return (
<div>
<p>
storeName: <b>{storeName}</b>, counter: <b>{counter}</b>
</p>
<button onClick={() => setCounter(counter + 1)}>increment</button>
</div>
);
}