0.0.7 • Published 3 years ago

react-bs-search v0.0.7

Weekly downloads
5
License
ISC
Repository
-
Last release
3 years ago

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

NameTypeDefaultDescription
placeholderStringDisplays placeholder inside search box
clearInputValueBooleanfalseClear the search value when true
onClearFunctionFired when close icon click
onChangeFunctionFired when input value changes
onEnterFunctionFired on mouse enter