{"id":11709,"library":"react-fuzzy","title":"React Fuzzy Search Component","description":"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.","status":"active","version":"1.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/ritz078/react-fuzzy-search","tags":["javascript"],"install":[{"cmd":"npm install react-fuzzy","lang":"bash","label":"npm"},{"cmd":"yarn add react-fuzzy","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-fuzzy","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for any React component. Version >=0.14.7 for broad compatibility.","package":"react","optional":false}],"imports":[{"note":"The main component, exported as a named export. ESM import is standard for React components.","wrong":"import FuzzySearch from 'react-fuzzy';\nconst FuzzySearch = require('react-fuzzy');","symbol":"FuzzySearch","correct":"import { FuzzySearch } from 'react-fuzzy';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { FuzzySearch } from 'react-fuzzy';\n\nfunction BookSearchComponent() {\n const list = [{\n id: 1,\n title: 'The Great Gatsby',\n author: 'F. Scott Fitzgerald'\n }, {\n id: 2,\n title: 'The DaVinci Code',\n author: 'Dan Brown'\n }, {\n id: 3,\n title: 'Angels & Demons',\n author: 'Dan Brown'\n }];\n\n const [selectedItem, setSelectedItem] = useState(null);\n\n return (\n
\n

Selected Book: {selectedItem ? `${selectedItem.title} by ${selectedItem.author}` : 'None'}

\n {\n setSelectedItem(newSelectedItem);\n }}\n placeholder=\"Search for books or authors...\"\n />\n
\n

Custom Result Template:

\n {\n setSelectedItem(newSelectedItem);\n }}\n resultsTemplate={(props, state, styles, clickHandler) => {\n return state.results.map((val, i) => {\n const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;\n return (\n clickHandler(i)}\n >\n {val.title}\n by {val.author}\n
\n );\n });\n }}\n />\n
\n \n );\n}\n\nexport default BookSearchComponent;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Version 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`).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always provide an `onSelect` prop that updates your component's local state or performs a side effect with the `newSelectedItem` argument.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"When 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).","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Version 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.","severity":"gotcha","affected_versions":">=1.3.1"},{"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.","message":"The `maxPatternLength` prop defines the maximum length of the search query. Exceeding this length will throw an error, preventing potentially intensive search operations.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the `list` prop is always an array of objects, even if empty, before passing it to `FuzzySearch`.","cause":"The `list` prop provided to `FuzzySearch` is either `null`, `undefined`, or not an array.","error":"TypeError: Cannot read properties of undefined (reading 'map')"},{"fix":"Reduce the search query length or increase the `maxPatternLength` prop in your `FuzzySearch` component (default is 32).","cause":"The user's search query (pattern) has exceeded the configured `maxPatternLength` prop.","error":"Error: Pattern length exceeds maxPatternLength"},{"fix":"If you need to listen to input changes, use the `onInput` prop directly on the `FuzzySearch` component instead of nesting it within `inputProps`.","cause":"You are trying to pass an `onChange` handler via `inputProps` which conflicts with the component's internal input handling.","error":"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."},{"fix":"Ensure `resultsTemplate` is a function that accepts `(props, state, styles, clickHandler)` as arguments and returns JSX.","cause":"The `resultsTemplate` prop was not provided as a function.","error":"Invalid prop `resultsTemplate` supplied to `FuzzySearch`. Expected a function, got [object Object]."}],"ecosystem":"npm"}