@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

Installation

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

Configuration

// 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>
  );
}

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>
        storeName: <b>{storeName}</b>, counter: <b>{counter}</b>
      </p>
      <button onClick={() => setCounter(counter + 1)}>increment</button>
    </div>
  );
}

API

View the API reference here.