@location-state/core
State management library for React that synchronizes with history location supporting Next.js App 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 App Router
Installation
npm install @location-state/core
# or
yarn add @location-state/core
# or
pnpm add @location-state/coreConfiguration
// 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>
);
}Working with state
"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>
);
}API
View the API reference here.