Package Exports

use-next-query-state
use-next-query-state/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-next-query-state) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

Or with yarn:

yarn 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

Import the hook in your component:

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

Use the hook in your component:

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

function MyComponent() {
  const defaultParams = {
    search: "",
    page: "1",
  };

  const [queryState, setQueryState] = useNextQueryState(defaultParams); // Default params will never appear in the query

  return (
    <div>
      <input
        type="text"
        value={queryState.search}
        onChange={(e) =>
          setQueryState({ ...queryState, search: e.target.value })
        }
        placeholder="Search..."
      />
      {/* More components using the queryState */}
    </div>
  );
}

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