https://github.com/nitedani/zustand-querystring

A Zustand middleware that syncs the store with the querystring.
https://github.com/nitedani/zustand-querystring

querystring state state-management zustand

Last synced: 3 months ago
JSON representation

A Zustand middleware that syncs the store with the querystring.

• Host: GitHub
• URL: https://github.com/nitedani/zustand-querystring
• Owner: nitedani
• Created: 2022-12-02T22:17:50.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-12T16:32:36.000Z (about 1 year ago)
• Last Synced: 2024-05-08T00:15:23.865Z (9 months ago)
• Topics: querystring, state, state-management, zustand
• Language: TypeScript
• Homepage:
• Size: 194 KB
• Stars: 42
• Watchers: 2
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# zustand-querystring

A Zustand middleware that syncs the store with the querystring.

Try on [StackBlitz](https://stackblitz.com/github/nitedani/zustand-querystring/tree/main/examples/react) (You need to click "Open in New Tab")

Examples:

- [React](./examples/react/)

- [NextJS](./examples/next/)

- [Rakkas](./examples/rakkas/)

Quickstart:

```ts

import create from "zustand";

import { querystring } from "zustand-querystring";

interface Store {

  count: number;

  ticks: number;

  someNestedState: {

    nestedCount: number;

    hello: string;

  };

}

export const useStore = create()(

  querystring(

    (set, get) => ({

      count: 0,

      ticks: 0,

      someNestedState: {

        nestedCount: 0,

        hello: "Hello",

      },

    }),

    {

      // select controls what part of the state is synced with the query string

      // pathname is the current route (e.g. /about or /)

      select(pathname) {

        return {

          count: true,

          // ticks: false, <- false by default

          someNestedState: {

            nestedCount: true,

            hello: "/about" === pathname,

          },

          // OR select the whole nested state

          // someNestedState: true

        };

      },

    },

  ),

);

```

querystring options:

- select - the select option controls what part of the state is synced with the query string

- key: string - the key option controls how the state is stored in the querystring (default: $)

- url - the url option is used to provide the request url on the server side render