node package manager


React + Bootstrap powered search box component


Settings ## What it does

  • Lets you enter multiple search terms as visual tags
  • Each term can be configured with additional labels/metadata
  • Predefined set of terms can be displayed upon initial loading
  • Covers only the view layer and therefore expects callback functions which will be invoked with the current terms as the only parameter:
    • Terms change: remove/add
    • Search press

Live Demo: Click here

Example of prepopulated terms formatting

const terms = [
        value: 'Paris',
        label: 'City'
    }, {
        value: 'France',
        label: null
    }, {
        value: 'Spain',
        label: null
    }, {
        value: 'Madrid',
        label: null

Example of label configuration

const labels = {
    City: {
        style: {
            border: '2px dashed red',
            background: 'lightblue'
        value: 'City'
    Country: {
        style: {
            border: '2px dashed green',
            background: 'white'
        value: 'Country'

Example of suggestions format

const suggestions = ['city:Sofia', 'Sofia', 'country:Bulgaria', 'Bulgaria', 'London', 'England'];

Example of required callbacks

function onSearchPress(terms) {
function onTermsChange(terms) {

Using the component

        onTermsChange={onTermsChange}/>, document.getElementById('root'));

Running a demo

npm install
npm start