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.

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

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.