react-fuzzy

library1.3.1jsnpmunverified

react-fuzzy is a React component that provides a customizable fuzzy search input field and results dropdown. It enables developers to integrate powerful fuzzy search capabilities into their React applications with minimal setup, abstracting away the underlying search logic. The current stable version is 1.3.1, which includes compatibility updates for React 17 and 18. The package demonstrates a moderate release cadence, with minor updates addressing new features, bug fixes, and peer dependency compatibility. Key differentiators include extensive customization options for the UI (via `resultsTemplate`, `inputProps`, and various style props) and the ability to configure the underlying fuzzy search algorithm parameters like `threshold`, `distance`, and `keys` to search within specific object properties.

web-framework

npm install react-fuzzy

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FUZZY

react-fuzzy

web-frameworkjavascriptv1.3.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FuzzySearch

✓ import { FuzzySearch } from 'react-fuzzy';

✗ import FuzzySearch from 'react-fuzzy'; const FuzzySearch = require('react-fuzzy');

The main component, exported as a named export. ESM import is standard for React components.

Demonstrates basic usage of the FuzzySearch component with a predefined list of objects, including state management for selected items and an example of a custom result template for enhanced UI.

import React, { useState } from 'react'; import { FuzzySearch } from 'react-fuzzy'; function BookSearchComponent() { 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' }]; const [selectedItem, setSelectedItem] = useState(null); return ( <div> <p>Selected Book: {selectedItem ? `${selectedItem.title} by ${selectedItem.author}` : 'None'}</p> <FuzzySearch list={list} keys={['author', 'title']} width={430} onSelect={(newSelectedItem) => { setSelectedItem(newSelectedItem); }} placeholder="Search for books or authors..." /> <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '10px' }}> <h3>Custom Result Template:</h3> <FuzzySearch list={list} keys={['author', 'title']} width={430} onSelect={(newSelectedItem) => { setSelectedItem(newSelectedItem); }} 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, padding: '8px', borderBottom: '1px solid #f0f0f0' }} onClick={() => clickHandler(i)} > <strong>{val.title}</strong> <span style={{ float: 'right', opacity: 0.7, fontSize: '0.9em' }}>by {val.author}</span> </div> ); }); }} /> </div> </div> ); } export default BookSearchComponent;

Debug

Known issues

breakingVersion 1.0.0 introduced a breaking change by stopping the use of string refs. Ensure your React environment is compatible with modern ref patterns (callback refs or `createRef`).

fix

Update any legacy string refs in your codebase to modern React ref patterns if you were previously relying on them in conjunction with this library or if your React version demands it.

affects: >=1.0.0

gotchaThe `onSelect` prop expects a function to handle the selected item. If not provided or if it doesn't correctly update component state, the UI might not reflect the selection.

fix

Always provide an `onSelect` prop that updates your component's local state or performs a side effect with the `newSelectedItem` argument.

affects: >=1.0.0

gotchaWhen using `resultsTemplate` for custom rendering, ensure that you correctly apply `styles` and call `clickHandler` on clickable elements within your template to maintain correct component behavior (e.g., selection highlighting and item selection).

fix

Refer to the `resultsTemplate` example in the documentation or quickstart to correctly implement custom rendering, paying attention to `styles.selectedResultStyle`, `styles.resultsStyle`, and `clickHandler`.

affects: >=1.0.0

gotchaVersion 1.3.1 updated peer dependencies to explicitly support React 17 and 18. While older versions of React might still work, compatibility is best ensured with these versions.

fix

Ensure your project's React version is compatible with the `react-fuzzy` peer dependencies, ideally React 17 or 18. Address any peer dependency warnings during installation.

affects: >=1.3.1

gotchaThe `maxPatternLength` prop defines the maximum length of the search query. Exceeding this length will throw an error, preventing potentially intensive search operations.

fix

If users are expected to type very long queries, consider increasing the `maxPatternLength` prop, but be mindful of performance implications, especially with large datasets.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'map')

The `list` prop provided to `FuzzySearch` is either `null`, `undefined`, or not an array.

fix

Ensure the `list` prop is always an array of objects, even if empty, before passing it to `FuzzySearch`.

Error: Pattern length exceeds maxPatternLength

The user's search query (pattern) has exceeded the configured `maxPatternLength` prop.

fix

Reduce the search query length or increase the `maxPatternLength` prop in your `FuzzySearch` component (default is 32).

Warning: FuzzySearch: `inputProps` key `onChange` will be overridden by the internal `onChange` handler. If you wish to use your own `onChange` handler, pass it to the `onInput` prop instead.

You are trying to pass an `onChange` handler via `inputProps` which conflicts with the component's internal input handling.

fix

If you need to listen to input changes, use the `onInput` prop directly on the `FuzzySearch` component instead of nesting it within `inputProps`.

Invalid prop `resultsTemplate` supplied to `FuzzySearch`. Expected a function, got [object Object].

The `resultsTemplate` prop was not provided as a function.

fix

Ensure `resultsTemplate` is a function that accepts `(props, state, styles, clickHandler)` as arguments and returns JSX.

Upgrade

Version history

1.3.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for any React component. Version >=0.14.7 for broad compatibility.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ritz078/react-fuzzy-search ↗

packagehttps://www.npmjs.com/package/react-fuzzy ↗