React Search Operators

Search component based on search-operators, where users can type search queries and apply filters.

• complete set of operators
• sentence tokenization
• complete theming freedom
• highly customizable through composition

Use this package when you want to parse a search query. If you don't need parse input but you need advanced features in suggestions maybe you are looking for react-autosuggest.

Installation

yarn add react-search-operators

or

npm install react-search-operators --save

Basic Usage

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Search from 'react-search-operators'
import 'react-search-operators/dist/index.css';
 
const App = () => {
  const [state, setState] = useState({})
  console.log(state);
  return (
    <div className='app'>
      <Search onChange={setState} onSearch={onSearch}/>
    </div>
  )
}
 
// write "I need +results" on input, then
// open debug console:
//{
//  {
//    "filters": [{ "type": "exact", "value": "results" }],
//    "terms": ["I","need"]
//  }
//  "text": "I need +results"
//}
 
ReactDOM.render(<App/>, document.getElementById('root'))
 

Check out github-page to see more examples!

Operators

• exact word or phrase
• exclude word
• match
• inverse match

Complete documentation here.

Props

API

Events:

• onSearch(searchQuery)

searchQuery: {
  text, // search text
  parsed, // ParseResult object
  tokens, // Token array
  suggestions //Suggestion array
}

• onChange(searchParseResult)

searchParseResult: {
  text, // search text
  parsed // ParseResult object
}

• onSelect(suggestion)

// user defined suggestion object

• onTextChange(text)

// text string

Types:

• ParseResult (default implementation)

{
  filters: [
    { 
      type, //one of 'match' | 'not-match' | 'exact' | 'exclude',
      value, //value 
      in //optional, used by match and not-match operator
    }
  ],
  terms: [] // search terms
}

• Token (default implementation)

{
  type, // token type, one of: TEXT, INCLUDE_WORD, EXCLUDE_WORD, EXACT_PHRASE, MATCH, NOT_MATCH,
  value, // matched string
  // Token location data
  startOffset, 
  endOffset, 
  startLine,
  endLine,
  startColumn,
  endColumn,
}

Supported browsers

Minimum confirmed browser requirements to run React-Search-Operators. Testing was done using the sample project.

Licence

MIT do whatever you want to do!