# react-search-operators

> Search component based on search-operators

Latest version **1.0.2** (published 2020-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-search-operators
pnpm add react-search-operators
yarn add react-search-operators
bun add react-search-operators
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-04-30 |
| First published | 2020-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 282 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | fedemartinm |
| Maintainers | fedemartin |
| Keywords | react, search, parser, commands |

## Links

- npm: https://www.npmjs.com/package/react-search-operators
- Repository: https://github.com/fedemartinm/react-search-operators
- Homepage: https://github.com/fedemartinm/react-search-operators#readme
- Issues: https://github.com/fedemartinm/react-search-operators/issues
- npm.io page: https://npm.io/package/react-search-operators

## Dependencies (3)

- [react-themeable](https://npm.io/package/react-themeable.md) ^1.1.0
- [search-operators](https://npm.io/package/search-operators.md) ^1.0.8
- [react-autowhatever](https://npm.io/package/react-autowhatever.md) ^10.2.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-04-30
- 1.0.1 — 2020-04-30
- 1.0.0 — 2020-04-30

## README

![npm](https://img.shields.io/npm/v/react-search-operators)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-search-operators?color=green)

# React Search Operators
Search component based on [search-operators](https://github.com/fedemartinm/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](https://github.com/moroshko/react-autosuggest).

### Installation
```shell
yarn add react-search-operators
```

or

```shell
npm install react-search-operators --save
```

### Basic Usage
```javascript
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](https://fedemartinm.github.io/react-search-operators/) to see more examples!

### Operators
 - exact word or phrase
 - exclude word
 - match
 - inverse match

Complete documentation [here](https://github.com/fedemartinm/search-operators#operators).

### Props
| Prop   | Type    | Description | Notes |
|--------|---------|-------------|-------|
|  as    | elementType  | an element type to render as input | See an example [here](https://github.com/fedemartinm/react-search-operators/blob/master/example/src/Examples/Highlighting/DraftInput.js).  |
|  text    | string  | search text  | Use it on controlled implementations.   |
|  icon    | elementType  |  an element type to render as icon  |   |
|  parser    | function  |  replace default parser implementation  |  |
|  parserOptions    | object  |  default parser options  | See default [search-opeartors](https://github.com/fedemartinm/search-operators#api) options. |
|  suggestions    | array  |  search suggestions  | See [suggestions example](https://github.com/fedemartinm/react-search-operators/blob/master/example/src/Examples/Suggestions/App.js). |
|  suggestionAs    | elementType  |  an element type to render as suggestion  |   |
|  id    | string    | IDs used in ARIA |  If component is used more than once to be sure each is unique.  |
|  theme    | object, array    | style your search component  |  CSS Modules, Inline Styles, etc. See [react-themeable](https://github.com/markdalgleish/react-themeable) |
|  placeholder    | string  | input placeholder text  |   |
|  onSearch    | function  |  called after user clicks search or types enter   |   |
|  onSelect    | function  |  called when a suggestion is clicked |   |
|  onChange    | function  |  called every time search is parsed  |   |
|  onTextChange    | function  |  called every time search text change  | Use it on controlled implementations.  |

### API

#### Events:
- onSearch(searchQuery)
```js
searchQuery: {
  text, // search text
  parsed, // ParseResult object
  tokens, // Token array
  suggestions //Suggestion array
}
```
- onChange(searchParseResult)
```js
searchParseResult: {
  text, // search text
  parsed // ParseResult object
}
```

- onSelect(suggestion)
```js
// user defined suggestion object
```

- onTextChange(text)
```js
// text string
```

#### Types:

- ParseResult (default implementation)
```js
{
  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)
```js
{
  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.


| Chrome | Firefox | Safari | Opera | Edge | IE |
|--------|---------|--------|-------|------|----|
| 38     |    31   |   9.1  |   25  |  16  | 11 |

## Licence 
[MIT](https://github.com/fedemartinm/react-search-operators/blob/master/LICENSE) do whatever you want to do!

---
_Source: https://npm.io/package/react-search-operators · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._