use-nextjs-search-params

use-nextjs-search-params is a custom hook designed to manage and manipulate search parameters in Next.js applications efficiently.

Features

• Easily add any key-value pair in the onFilter function and use it as you named.
• Automatically handles arrays or objects without requiring JSON.stringify.

Author

• Developed by Ahmed Nasser.

Installation

To install this package, run:

npm install use-nextjs-search-params

Usage

Example

import useNextjsSearchParams from 'use-nextjs-search-params';

const ExampleComponent = () => {
  const { onFilter, onReset, onResetAll, ...params } = useNextjsSearchParams();

  const handleFilter = () => {
    onFilter('category', 'books');
    onFilter('price', { min: 10, max: 50 });
  };

  const handleReset = () => {
    onReset('category');
  };

  const handleResetAll = () => {
    onResetAll();
  };

  return (
    <div>
      <button onClick={handleFilter}>Set Filters</button>
      <button onClick={handleReset}>Reset Category</button>
      <button onClick={handleResetAll}>Reset All Filters</button>
      <pre>{JSON.stringify(params, null, 2)}</pre>
    </div>
  );
};

export default ExampleComponent;

const Component = () => {
  const { onFilter, onReset, onResetAll, page, ...params } = useNextjsSearchParams();

  // Use the hook as needed in your component
};

API

• onFilter(key: string, value: any): Sets a filter parameter.
• onReset(key: string): Removes a specific filter parameter.
• onResetAll(): Removes all filter parameters.
• page: number: Page number (default is 1).
• ...params: Other dynamic parameters from the URL.

Example

You can write any name as key and use it from use-nextjs-search-params:

import useNextjsSearchParams from 'use-nextjs-search-params';

const MyComponent = () => {
  const { onFilter, onReset, name, page } = useNextjsSearchParams();

  return (
    <SearchInput
      onSearchClear={() => onReset('name')}
      searchTerm={name || ''}
      onSearchChange={(e) => {
        onFilter('name', e.target.value);
        if (page === 1) return;
        onFilter('page', 1);
      }}
    />
  );
};

License

This project is licensed under the MIT License.