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
3
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.