react-bs-search

React Bootstrap Search Box

Add easier search box to your site with close icon on search and support callback method for mouse events.

import { SearchInputBox } from "react-bs-search";

Search Input box

Search input box supports callback method for mouse event.

• Default it has the close icon if search value is not null.

Example

import React, {useState} from 'react';
import { SearchInputBox } from "react-bs-search";

function App() {
    const [setSearchMember , setSearchMember] =useState=(""); // For local reference
    // Initializing search input box 
    const [searchProps, setSearchProps] = useState({
        "placeholder": "Search team members...",
        "onClear": () => setSearchMember(""),
        "onChange": (searchValue) => setSearchMember(searchValue);
        "OnEnter": (searchValue) => setSearchMember(searchValue);
        "clearInputValue": false
    });

  return (
    <div className="App">
            <div className="search-wrap">
                <SearchInputBox {...searchProps} />
            </div>
    </div>
  );
}
export default App;

Modal Properties

Name	Type	Default	Description
placeholder	String		Displays placeholder inside search box
clearInputValue	Boolean	false	Clear the search value when true
onClear	Function		Fired when close icon click
onChange	Function		Fired when input value changes
onEnter	Function		Fired on mouse enter