{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-fuzzy"],"cli":null},"imports":["import { FuzzySearch } from 'react-fuzzy';"],"auth":{"required":false,"env_vars":[]},"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    <div>\n      <p>Selected Book: {selectedItem ? `${selectedItem.title} by ${selectedItem.author}` : 'None'}</p>\n      <FuzzySearch\n        list={list}\n        keys={['author', 'title']}\n        width={430}\n        onSelect={(newSelectedItem) => {\n          setSelectedItem(newSelectedItem);\n        }}\n        placeholder=\"Search for books or authors...\"\n      />\n      <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '10px' }}>\n        <h3>Custom Result Template:</h3>\n        <FuzzySearch\n          list={list}\n          keys={['author', 'title']}\n          width={430}\n          onSelect={(newSelectedItem) => {\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                <div\n                  key={i}\n                  style={{ ...style, padding: '8px', borderBottom: '1px solid #f0f0f0' }}\n                  onClick={() => clickHandler(i)}\n                >\n                  <strong>{val.title}</strong>\n                  <span style={{ float: 'right', opacity: 0.7, fontSize: '0.9em' }}>by {val.author}</span>\n                </div>\n              );\n            });\n          }}\n        />\n      </div>\n    </div>\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}