fuzzy-search-m

A lightweight React component for fuzzy search with highlighting capabilities.

Features

• 🔍 Fuzzy search algorithm
• ✨ Highlight matched characters
• 🎨 Customizable styling
• 📱 Responsive design
• 🎯 TypeScript support
• ⚡ Lightweight and fast

Installation

npm install fuzzy-search-m

Usage

Basic Usage

import { FuzzySearch } from 'fuzzy-search-m';

const data = [
  "Dashboard",
  "Profile Settings", 
  "User Management",
  "Analytics Overview",
  "System Logs"
];

function App() {
  return (
    <FuzzySearch 
      data={data}
      placeholder="Search items..."
    />
  );
}

Advanced Usage

import { FuzzySearch } from 'fuzzy-search-m';

const data = [
  "Dashboard",
  "Profile Settings",
  "User Management", 
  "Analytics Overview",
  "System Logs"
];

function App() {
  const handleSearch = (results: string[]) => {
    console.log('Search results:', results);
  };

  const renderItem = (item: string, isHighlighted: boolean) => (
    <div className={`p-2 ${isHighlighted ? 'bg-blue-50' : ''}`}>
      {item}
    </div>
  );

  return (
    <FuzzySearch
      data={data}
      placeholder="Search items..."
      className="max-w-md"
      highlightClassName="bg-yellow-300 text-black"
      showResultsCount={true}
      showClearButton={true}
      onSearch={handleSearch}
      renderItem={renderItem}
    />
  );
}

Props

Prop	Type	Default	Description
data	string[]	-	Array of strings to search through
placeholder	string	"Search..."	Placeholder text for the search input
className	string	""	Additional CSS classes for the container
highlightClassName	string	"bg-yellow-200 text-black rounded"	CSS classes for highlighted characters
showResultsCount	boolean	true	Whether to show the results count
showClearButton	boolean	true	Whether to show the clear button
onSearch	(results: string[]) => void	-	Callback function called when search results change
renderItem	(item: string, isHighlighted: boolean) => React.ReactNode	-	Custom render function for each item

Styling

The component uses Tailwind CSS classes by default. You can customize the appearance by:

1. Overriding the className prop
2. Customizing the highlightClassName prop
3. Using the renderItem prop for complete control over item rendering

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build:lib

# Preview the build
npm run preview

License

MIT