react-debounced-search
v1.0.3
Published
The `react-debounced-search` package provides a React component called `DebouncedSearchBar`, which offers debounced search functionality for text input fields in React applications. This component allows you to delay the execution of search operations unt
Downloads
265
Readme
React Debounced Search
Introduction
The react-debounced-search
package provides a React component called DebouncedSearchBar
, which offers debounced search functionality for text input fields in React applications. This component allows you to delay the execution of search operations until the user has stopped typing for a specified period, thus reducing the number of unnecessary search requests and improving performance.
Installation
You can install the package via npm or yarn:
npm install react-debounced-search
# or
yarn add react-debounced-search
Usage
Once installed, you can import the DebouncedSearchBar
component into your React application and use it as follows:
import { DebouncedSearchBar } from 'react-debounced-search';
import { useState } from 'react';
const App = () => {
const [searchValue, setSearchValue] = useState("");
const handleInput = (value) => {
setSearchValue(value);
// Perform your search operation here with the 'value' parameter
};
return (
<div>
<DebouncedSearchBar delay={1000} onSearch={handleInput} />
{searchValue}
</div>
);
};
export default App;
In the above example, we create a state variable searchValue
to store the current value of the search input. We then define a handleInput
function to update this state variable whenever the user types in the search bar. The DebouncedSearchBar
component takes two props:
delay
: The delay in milliseconds before executing the search operation after the user stops typing. In this example, it's set to 1000ms (1 second).onSearch
: A callback function that is called with the current value of the search input after the debounce delay. In this example, it's set tohandleInput
.
Conclusion
With the react-debounced-search
package, you can easily implement debounced search functionality in your React applications, reducing unnecessary API calls and improving user experience.