NPM i react-search-box

Introduction

React-search-box is a simple, customizable and reusable search box for React (Web Application).

Features

• Simple and customizable
• Reusable component
• Enhances user experience

Installation

To install react-search-box as a dependency, you can run the following command:

npm i react-search-box

Usage

1. Import SearchBox into your component:

import SearchBox from 'react-search-box';

2. Use SearchBox component in your component:

<SearchBox
  placeholder="Search..."
  onChange={(value) => console.log(value)}
  onFocus={() => console.log('onFocus')}
  onBlur={() => console.log('onBlur')}
  onKeyDown={() => console.log('onKeyDown')}
  value=""
  inputBoxBorderColor="#009688"
  inputBoxHeight={36}
  inputBoxFontSize={16}
  inputBoxBorderRadius={50}
/>

Props

| Prop | Type | Description | | ----------------------| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | placeholder | string | Placeholder text that appears in the search bar | | onChange | function | Function that is called when the search text changes. The function should accept a single string parameter. | | onFocus | function | Function that is called when the search box receives focus | | onBlur | function | Function that is called when the search box loses focus | | onKeyDown | function | Function that is called when a key is pressed while the search box has focus | | value | string | The search value | | inputBoxBorderColor | string | The border color | | inputBoxHeight | number | The height of the search box | | inputBoxFontSize | number | The font size of the search box | | inputBoxBorderRadius | number | The border radius of the search box |

Conclusion

React-search-box is a simple, customizable and reusable search box for React (Web Application). It is easy to use, and provides a great user experience. By importing and using the SearchBox component in your React application, you can quickly and easily add a search box to your user interface.