React Search Field

An elegant search field component for React.

See Demo and Documentation.

Props

The component takes the following props.

| Prop | Type | Description | |-------------------|------------|-------------| | classNames | string | Additional classnames for the component | | searchText | string | Initial search value of the input | | placeholder | string | placeholder for the search input | | disabled | boolean | Disabling the search input | | onChange | function | Callback function to invoke when the user press any key. The function should contain two parameters(value, event). | | onEnter | function | Callback function to invoke when the user press enter after pressing few keys. The function should contain two parameters(value, event). | | onSearchClick | function | Callback function to invoke when the user click the search button. The function should contain one parameter(value). | | onBlur | function | Callback function to invoke when the user blurs the search box. The function should contain two parameters(value, event). |

Installation

npm install react-search-field --save

Usage

import SearchField from "react-search-field";

<SearchField
  placeholder="Search..."
  onChange={onChange}
  searchText="This is initial search text"
  classNames="test-class"
/>

Run

npm start

License

MIT Licensed. Copyright (c) Farhad Yasir 2021.