useNextQueryState

A custom React hook designed to synchronize component state with the URL's query parameters. This allows you to easily reflect a component's state in the URL or initialize a component's state from the URL.

This is especially useful for enhancing user experience by maintaining the state when sharing URLs with others, or after refreshing the page.

Installation

1npm install use-next-query-state --save

Or with yarn:

1yarn add use-next-query-state

Compatibility

This hook leverages next/navigation and is primarily intended for use within the Next.js framework from version 13.

Usage

1. Import the hook in your component:

1import useNextQueryState from "use-next-query-state";

2. Use the hook in your component:

1import useNextQueryState from "use-next-query-state";
2
3function MyComponent() {
4  const defaultParams = {
5    search: "",
6    page: "1",
7  };
8
9  const [queryState, setQueryState] = useNextQueryState(defaultParams); // Default params will never appear in the query
10
11  return (
12    <div>
13      <input
14        type="text"
15        value={queryState.search}
16        onChange={(e) =>
17          setQueryState({ ...queryState, search: e.target.value })
18        }
19        placeholder="Search..."
20      />
21      {/* More components using the queryState */}
22    </div>
23  );
24}

API

useNextQueryState(defaultQuery: URLQueryParams)

Parameters:

• defaultQuery (Object): The default query parameters to be used as a fallback and to be omitted from the URL when they match the default values.

Returns:

• queryState (Object): The current state, which is synchronized with the URL's query parameters.
• setQueryState (Function): A function to update the queryState. This will also update the URL's query parameters accordingly.

Note on Behavior

This hook automatically:

• Sets the initial state from the URL's query parameters on mount.
• Updates the URL's query parameters to reflect the state. It avoids adding default parameters to the URL to keep it clean.

License

MIT License