React Search Bar Semantic UI

A search bar component built based on Semantic UI React.

日本語版はこちら

Installation

npm install --save react-search-bar-semantic-ui

For CommonJS user:

import SearchBar from 'react-search-bar-semantic-ui';

Usage

The following code is the basic usage of SearchBar component by assigning all the fields used in default search result component.

import React, { Component } from 'react';
import SearchBar from 'react-search-bar-semantic-ui';

class App extends Component {
    render() {
        return(
            <SearchBar data={[{title: "Hello World", description: "This is an example data.", image: "https://via.placeholder.com/150", price: 100}]} />
            );
        }
    }
}

export default App;

The demo project can be found here.

Its source code can be found here.

The demo project uses the database to retrieve data and passes that to the SearchBar component. It also shows the example of customComponent props. By clicking on the Change Search Result button, it will use the custom search result component to display each result.

Here, the customComponent looks something like the following.

const customComponent = (props) => {
    const {title} = props;
    return (
        <div>
            {title && <div className='title custom-result'>{title}</div>}
        </div>
    )
}

In the same way, you can retrieve any fields of the object by accessing it through props

Props

Name	Type	Description
data	Array	An array storing data. Each element needs to have title property.
onResultSelect	Function	A function that will be called when search result was clicked.
customComponent	Function	A component that can be used for the search results shown.

• objects in data need to at least have a field title otherwise it will not be shown in the search result

const data = [
    {
        title: "Hello",
        // ... whatever other fields
    }
]

• onResultSelect needs to follow the following syntax to retrieve result

// the resulting object will be stored in variable "result"
function onResultSelect(event, {result}) {
    // do something
}