react-responsive-searchbox v1.1.4

React Responsive Search Box

A search box component library built using React Js

Important note-

Please include a font-awesome CDN in your app for the search icon to display.

How to install

npm install --save react-responsive-searchbox

How to import into your component

import SearchBox from 'react-responsive-searchbox/lib/SearchBox';

Usage Example

import React, { Component } from 'react';
import SearchBox from 'react-responsive-searchbox/lib/SearchBox';

class App extends Component {

  state = {searchBoxVal:""}

  handleSearchBoxValChange = (e)=>{
    this.setState({
      searchBoxVal:e.target.value
    })
  }

  handleSearchBoxSubmit = (e)=>{
    e.preventDefault();
    console.log(this.state.searchBoxVal);
  }

  render() {
    return (
      <div>
        <SearchBox placeholder="Enter search term" value={this.state.searchBoxVal} onchange={this.handleSearchBoxValChange}
        searchBoxStyles={{color:"dodgerBlue", height:"24px", border:"1px solid blue"}}
        searchButtonStyles={{background:"dodgerBlue", border:"1px solid blue"}}
        searchIconStyles={{color:"#fff", height:"24px", lineHeight:"24px"}}
        OnSubmit={this.handleSearchBoxSubmit}
        />
      </div>
    );
  }
}

API info (props passed)