Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-search-field

nutboltu3kMIT2.0.1

This is a simple search field component for react

react, react search, react search field, react search component, searchbar, search

readme

React Search Field

dependencies Status Actions Status Follow @nutboltu

NPM

An elegant search field component for React.

See Demo and Documentation.

Screenshot

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.