Skip to content
An elegant search field component for React.
JavaScript HTML CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist [feature] minified pacakge with babel 7 and webpack 4 Nov 25, 2018
docs [feature] add screenshot Nov 25, 2018
src [feature] add screenshot Nov 25, 2018
tests
.babelrc [feature] minified pacakge with babel 7 and webpack 4 Nov 25, 2018
.eslintrc add unit test for searchfield component Nov 25, 2018
.gitignore initial commit Jan 19, 2018
.npmignore Add travis.yml and npmignore Jan 19, 2018
.travis.yml Add travis.yml and npmignore Jan 19, 2018
README.md fix(pacakge-update): update vulnerable packages Jan 5, 2019
package.json
webpack.config.js [feature] add screenshot Nov 25, 2018
webpack.production.config.js [feature] minified pacakge with babel 7 and webpack 4 Nov 25, 2018

README.md

React Search Field

dependencies Status Build Status

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
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).

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 2018.

You can’t perform that action at this time.