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.
An elegant search field component for React.
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
react-search is a simple search autocomplete component using react.js.
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
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.
Features 👍
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
Visual metasearch engine built with React, Redux, Express, and TypeScript. http://spresso-search.herokuapp.com/
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
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:
Why
You should be using React InstantSearch if you want to:
View on GitHub: https://github.com/algolia/react-instantsearch
A React and React Native UI components library for Elasticsearch
Read how to build an e-commerce search UI
Design
Ease of Use
View on GitHub: https://github.com/appbaseio/reactivesearch
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.
$ npm install
$ npm start
Live demo
https://vakhtang.github.io/react-search-bar/
View on GitHub: https://github.com/vakhtang/react-search-bar
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