Reactjs-input-search NPM

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.