@location-state/next NPM

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