next-recoil-url-sync

next-recoil-url-sync is the tool that can be used to synchronize the URL query parameters with recoil atoms. It can only be used with the next js.

Features

• URL Persistence
  • Syncing an atom with the browser URL.

Installation

1npm install recoil next-recoil-url-sync

2# or
3yarn add recoil next-recoil-url-sync

4# or
5pnpm add recoil next-recoil-url-sync

syncEffect

Arguments

• queryName
  • This prop is used to match the URL query parameter.
• type
  • This prop specifies what type of value query parameter will have currently only supports Number and String types.

Example

1import { syncEffect } from "next-recoil-url-sync";
2import { atom } from "recoil";
3
4const nameQueryAtom = atom<string | null>({
5  key: "nameQueryAtom",
6  default: null,
7  effects: [syncEffect({ queryName: "name", type: "String" })],
8});