Socket
Socket
Sign inDemoInstall

@storybook/react-fuzzy

Package Overview
Dependencies
4
Maintainers
9
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/react-fuzzy

React Fuzzy Component


Version published
Weekly downloads
2.7K
increased by1003.61%
Maintainers
9
Install size
2.46 MB
Created
Weekly downloads
 

Readme

Source

react-fuzzy

fuzzy search in React

Installation

npm install --save @storybook/react-fuzzy

Basic Usage

const list = [{
  id: 1,
  title: 'The Great Gatsby',
  author: 'F. Scott Fitzgerald'
}, {
  id: 2,
  title: 'The DaVinci Code',
  author: 'Dan Brown'
}, {
  id: 3,
  title: 'Angels & Demons',
  author: 'Dan Brown'
}];

<FuzzySearch
      list={list}
      keys={['author', 'title']}
      width={430}
      onSelect={action('selected')}
    />

Custom Result Template

<FuzzySearch
  list={list}
  keys={['author', 'title']}
  width={430}
  onSelect={action('selected')}
  resultsTemplate={(props, state, styles, clickHandler) => {
    return state.results.map((val, i) => {
      const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
      return (
        <div
          key={i}
          style={style}
          onClick={() => clickHandler(i)}
        >
          {val.title}
          <span style={{ float: 'right', opacity: 0.5 }}>by {val.author}</span>
        </div>
      );
    });
  }}
/>

Options

attributedefaultdescription
caseSensitivefalseIndicates whether comparisons should be case sensitive.
classNamenullgive a custom class name to the root element
distance100Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.
idnullThe name of the identifier property. If specified, the returned result will be a list of the items' identifiers, otherwise it will be a list of the items.
include[]An array of values that should be included from the searcher's output. When this array contains elements, each result in the list will be of the form { item: ..., include1: ..., include2: ... }. Values you can include are score, matches. Eg: { include: ['score', 'matches' ] }
maxPatternLength32The maximum length of the pattern. The longer the pattern, the more intensive the search operation will be. Whenever the pattern exceeds the maxPatternLength, an error will be thrown.
onSelectnoopFunction to be executed on selection of any result.
width430width of the fuzzy searchbox
keysall[Array]List of properties that will be searched. This also supports nested properties.
listnullArray of properties to be filtered.
placeholder'Search'Placeholder of the searchbox
resultsTemplateFuncTemplate of the dropdown divs
shouldSorttrueWhether to sort the result list, by score.
sortFnArray.prototype.sortThe function that is used for sorting the result list.
threshold0.6At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything.
tokenizefalseWhen true, the search algorithm will search individual words and the full string, computing the final score as a function of both. Note that when tokenize is true, the threshold, distance, and location are inconsequential for individual tokens.
verbosefalseWill print to the console. Useful for debugging.

License

MIT @ Ritesh Kumar

FAQs

Last updated on 22 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc