Morioh
Login
Jack Downson

Jack Downson

4 years ago

8 Perfect React Search Component Examples

A search component is a software module that provides search functionality to an application. It typically consists of a user interface (UI) element for entering search queries, a search engine for processing and ranking search results, and a mechanism for displaying the results to the user. Search components can be used in a variety of applications, including websites, e-commerce platforms, and enterprise software.


In this post we will explore 8 perfect React search engines to help you add beautiful and user-friendly search bars to your apps. These examples cover a wide range of use cases, including simple search bars, autocomplete search bars, and advanced search bars.

1.React Search Field

An elegant search field component for React.
React Search Field

Installation

npm install react-search-field --save

Usage

import SearchField from "react-search-field";

<SearchField
  placeholder="Search..."
  onChange={onChange}
  searchText="This is initial search text"
  classNames="test-class"
/>

View on GitHub: https://github.com/nutboltu/react-search-field

2.React Search

react-search is a simple search autocomplete component using react.js.

.React Search

Install

yarn add react-search

Usage basic

Pass in your items as a prop to react-search. The items must be an array of objects with value and id, and any other props you may need, which will not be displayed. Check out the example for more info.

import Search from 'react-search'
import ReactDOM from 'react-dom'
import React, { Component, PropTypes } from 'react'

class TestComponent extends Component {

  HiItems(items) {
    console.log(items)
  }

  render () {
    let items = [
      { id: 0, value: 'ruby' },
      { id: 1, value: 'javascript' },
      { id: 2, value: 'lua' },
      { id: 3, value: 'go' },
      { id: 4, value: 'julia' }
    ]

    return (
      <div>
        <Search items={items} />

        <Search items={items}
                placeholder='Pick your language'
                maxSelected={3}
                multiple={true}
                onItemsChanged={this.HiItems.bind(this)} />
      </div>
    )
  }
}

ReactDOM.render( <TestComponent />, document.getElementById('root'))

View on GitHub : https://github.com/react-z/react-search 

3.Search UI

Libraries for the fast development of modern, engaging search experiences.

A React library that allows you to quickly implement search experiences without re-inventing the wheel.

Use it with Elastic App Search or Elastic Site Search to have a search experience up and running in minutes.

Search UI

Features 👍

  • You know, for search - Maintained by Elastic, the team behind Elasticsearch.
  • Speedy Implementation - Build a complete search experience with a few lines of code.
  • Customizable - Tune the components, markup, styles, and behaviors to your liking.
  • Smart URLs - Searches, paging, filtering, and more, are captured in the URL for direct result linking.
  • Headless - Leverage our application logic, provide your own components or views.
  • Flexible front-end - Not just for React. Use with any JavaScript library, even vanilla JavaScript.
  • Flexible back-end - Not just for Elastic App Search. Use with any backend.

Installation

npm install @elastic/search-ui @elastic/react-search-ui @elastic/react-search-ui-views
# or
yarn add @elastic/search-ui @elastic/react-search-ui @elastic/react-search-ui-views

 

View on GitHub: https://github.com/elastic/search-ui 

4.Spresso Search

Visual metasearch engine built with React, Redux, Express, and TypeScript. http://spresso-search.herokuapp.com/

Spresso Search

Spresso search scrapes search results from Google using the node x-ray library, and uses the same library to scrape obtain meta-information on webpages (preview images, favicons). There is a screenshot feature, which takes screenshots of sites that don’t have meta preview images in their HTML.

There is also a text-outline feature, powered by node-unfluff, which scrapes text content from web pages(ideal for articles & other text-rich pages), allowing the user to read the contents of a web page in clean, formatted text and without leaving the Spresso Search site.

View on GitHub: https://github.com/JoshuaRabiu/spresso-search 

5.React instantsearch

Lightning-fast search for React and React Native apps, by Algolia. React InstantSearch is a React library that lets you create an instant-search result experience using Algolia’s search API. It is part of the InstantSearch family:
React instantsearch

Why
You should be using React InstantSearch if you want to:

  • Design search experiences with best practices
  • Customize your components at will
  • Follow React principles

View on GitHub: https://github.com/algolia/react-instantsearch 

6.Reactive Search

A React and React Native UI components library for Elasticsearch
Read how to build an e-commerce search UI
Reactive Search

Features

Design

  • The sensor / actuator design pattern allows creating complex UIs where any number of sensors can be chained together to reactively update an actuator (or even multiple actuators).
  • The library handles the transformation of the UI interactions into database queries. You only need to include the components and associate each with a DB field.
  • Built in live updates - Actuators can be set to update results even when the underlying data changes in the DB.
  • Comes with scoped and styled components. Doesn’t require any external CSS library import, comes with className and innerClass support.
  • Is themable via ThemeProvider.

Ease of Use

  • One step installation with npm i @appbaseio/reactivesearch,
  • A UMD build that works directly in the browser. Installation steps here,
  • Styled and scoped components that can be easily extended,
  • See the reactivesearch starter app.

View on GitHub: https://github.com/appbaseio/reactivesearch 

7.React search bar

This library is no longer under active development. Do with it as you will. If you’re looking for an alternative, please use the excellent WAI-ARIA compliant react-autosuggest instead.

A general-purpose search bar, built in React.

React search bar

Getting Started

$ npm install
$ npm start

Live demo
https://vakhtang.github.io/react-search-bar/

View on GitHub: https://github.com/vakhtang/react-search-bar 

8.React JS search json

A simple, mobile-responsive website made with React.js that implements a multi-criteria search function for food recipes in a JSON file

View on GitHub: https://github.com/seanemery1/react-search-json 

Those are 8 perfect React search tools to help you add beautiful and user-friendly search bars to your app, which we bring to you in this post.

#reactjs #javascript #programming

8 Perfect React Search Component Examples
3 Likes743.45 GEEK