search

An elegant search field component for React

Oct 13, 2019
An elegant search field component for React

React Search Field

An elegant search field component for React.

View Demo View Github

react-search-field

Props

The component takes the following props.

PropTypeDescription
classNamesstringAdditional classnames for the component
searchTextstringInitial search value of the input
placeholderstringplaceholder for the search input
onChangefunctionCallback function to invoke when the user press any key. The function should contain two parameters(value, event).
onEnterfunctionCallback function to invoke when the user press enter after pressing few keys. The function should contain two parameters(value, event).
onSearchClickfunctionCallback function to invoke when the user click the search button. The function should contain one parameter(value).

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

GitHub

Recommended