use-query-set-state

1.0.1 • Public • Published

use-query-set-state

use-query-set-state is a custom React hook that simplifies handling and managing query parameters in the URL. It provides a convenient way to update and synchronize the component state with the query parameters in the URL.

Installation

Install my-project with npm

  npm install use-query-set-state

Usage

Import the hook

import useQuerySetState from 'use-query-set-state';

Example Usage

import React from 'react';
import useQuerySetState from 'use-query-set-state';

const MyComponent = () => {
  // Initialize the hook
  const [searchParams, updateSearchParams] = useQuerySetState();

  // Access the current query parameters
  console.log('Current Query Parameters:', searchParams);

  // Update the query parameters
  const handleButtonClick = () => {
    updateSearchParams({ page: 2, filter: 'example' });
  };

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={handleButtonClick}>Update Query Parameters</button>
    </div>
  );
};

export default MyComponent;

Authors

License

MIT

Package Sidebar

Install

npm i use-query-set-state

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

2.65 kB

Total Files

3

Last publish

Collaborators

  • jkhan-18