reactjs-input-search/README.md

search input with suggestion

## reactjs-input-search

reactjs-input-search is a simple, customizable input search component for React applications. It allows users to type in a search query and get suggestions based on the input provided. This component is ideal for building features like search bars with autocomplete functionality.


### Demo
Check out the live demo on [CodeSandbox](https://codesandbox.io/p/sandbox/reactjs-input-search-4whgrz).

### Features
- Customizable function for onChange input
- Customizable placeholder text
- Custom loading indicator
- Customizable "No Data Found" message
- Callback function on selecting a suggestion
- Custom styles for the input

### Installation
To install the package, use npm or yarn:

npm:

npm install reactjs-input-search


yarn:

yarn add reactjs-input-search


### Usage
Here's an example of how to use the reactjs-input-search component in your application:

in the App.js
```javascript
import { InputSearch } from 'reactjs-input-search';

const inputFunction = async (inputValue) => {
  const response = await fetch(`https://api.example.com/search?query=${inputValue}`);
  const data = await response.json();
  return data;
};

const handleSelect = (selectedItem) => {
  console.log('Selected:', selectedItem);
};

const customStyle = {
  width: 200,
  height: 35,
  padding: 5,
  borderRadius: 7,
  border: '1px solid #8a6f6f',
  outline: 'none'
};

<InputSearch 
  inputFunction={inputFunction} 
  onSelect={handleSelect}
  placeholder='Search Country' 
  keyName='name' 
  customLoading='Loading...' 
  noDataFound='Not Found' 
  inputStyle={customStyle} 
/>
```


### Props

The InputSearch component accepts the following props:

# InputSearch Component Props

| Name           | Type                    | Description                                                                                          |
| -------------- | ----------------------- | ---------------------------------------------------------------------------------------------------- |
| inputFunction*  | function                | A function that takes the input value and returns search suggestions. This should be an asynchronous function that fetches data from an API or other source. |
| keyName*        | string                  | The key in the suggestion data object to display as the suggestion.                                   |
| placeholder    | string                  | Placeholder text for the input field.                                                                |
| customLoading  | string or component     | Custom loading indicator to show while fetching suggestions.                                         |
| noDataFound    | string or component     | Custom message to display when no suggestions are found.                                             |
| onSelect       | function                | Callback function that gets called when a suggestion is selected.                                     |
| inputStyle     | object                  | Custom styles for the input field.                                                                   |
| highlight     | text                  | Color for matched text.                                                                   |




### Contributing
Contributions are welcome! Please open an issue or submit a pull request for any bugs, features, or improvements.