debounce_select v1.0.1

DebounceSelect

DebounceSelect is a React library that provides an input box with a dynamic dropdown menu populated with data retrieved from a specified API endpoint. The input box is debounced, ensuring that API requests are only made after the user has stopped typing for a specified time. This helps reduce the number of API calls, improving the performance and user experience of your application.

Features

• Debounced input box to limit API requests
• Dynamic dropdown menu populated with data from a specified API endpoint
• Customizable input field placeholder, option label, and option value
• Built-in loading indicator and 'no result found' message
• Supports click outside to close the dropdown

Installation

To install DebounceSelect, run the following command:

npm install debounce-select-library

Usage

Here's a basic example of how to use the DebounceSelect component in your application

import React from 'react';
import DebounceSelect from 'debounce-select-library';

const App = () => {
  const handleInputChange = (selectedValue) => {
    console.log('Selected Value:', selectedValue);
  };

  const apiFunc = async (searchText) => {
    // Replace this with your actual API call.
    const response = await fetch(`https://api.example.com/search?query=${searchText}`);
    const data = await response.json();
    return data;
  };

  return (
    <div>
      <h1>DebounceSelect Example</h1>
      <DebounceSelect
        onchange={handleInputChange}
        apiFunc={apiFunc}
        placeholder="Search for items"
        optionkey="name"
        optionValue="id"
      />
    </div>
  );
};

export default App;

Api

Contributing

Contributions are welcome! Please read the contributing guide to learn how you can get involved and help improve DebounceSelect.

License

DebounceSelect is released under the MIT License.