React Autocomplete Component

A lightweight, customizable autocomplete component for React applications with zero dependencies. This component provides a searchable dropdown with various animation options, styling customizations, and both basic and advanced modes.

Installation

npm install @aniruddha1806/autocomplete

Features

• 🔍 Simple search functionality with filtering options
• 🎨 Fully customizable styling
• ✨ Built-in animations with multiple presets
• 🌙 Dark mode support
• 🧩 Basic and advanced display modes
• 🔄 Zero external dependencies

Usage

import { Autocomplete } from '@aniruddha1806/autocomplete';

function App() {
  const fruits = [
    "Apple", "Banana", "Cherry", "Date", "Elderberry",
    "Fig", "Grape", "Honeydew", "Kiwi", "Lemon"
  ];

  const handleSelect = (word) => {
    console.log(`Selected: \${word}`);
  };

  return (
    <Autocomplete 
      words={fruits}
      onSelect={handleSelect}
      placeholder="Search fruits..."
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | words | string[] | [] | Array of strings to be used as autocomplete options | | mode | "basic" \\| "advanced" | "basic" | Display mode of the component | | strictMode | boolean | false | When true, only shows results that start with the input value | | className | string | "" | Additional class name for the root element | | inputClassName | string | "" | Additional class name for the input element | | dropdownClassName | string | "" | Additional class name for the dropdown container | | itemClassName | string | "" | Additional class name for dropdown items | | inputIcon | ReactNode | <SearchIcon /> | Custom icon for the input field | | itemIcon | ReactNode | undefined | Icon to display next to items (only in advanced mode) | | placeholder | string | "Search..." | Placeholder text for the input | | animationPreset | "fade" \\| "slide" \\| "scale" |" fade" | Animation style for the dropdown | | animated | boolean | true | Enable/disable animations | | onSelect | (word: string) => void | undefined | Callback function when an item is selected |

Examples

Basic Mode

The default mode with simple styling:

import { Autocomplete } from '@aniruddha1806/autocomplete';

function BasicExample() {
  const countries = [
    "United States", "Canada", "United Kingdom", "Australia", 
    "Germany", "France", "Japan", "Brazil", "India", "China"
  ];

  return (
    <Autocomplete 
      words={countries}
      placeholder="Search countries..."
    />
  );
}

Advanced Mode

Advanced mode with item icons:

import { Autocomplete } from '@aniruddha1806/autocomplete';
import { Globe } from 'lucide-react'; // Example icon library

function AdvancedExample() {
  const countries = [
    "United States", "Canada", "United Kingdom", "Australia", 
    "Germany", "France", "Japan", "Brazil", "India", "China"
  ];

  return (
    <Autocomplete 
      words={countries}
      mode="advanced"
      itemIcon={<Globe size={16} />}
      placeholder="Search countries..."
      animationPreset="slide"
    />
  );
}

With Strict Mode

Only show results that start with the input value:

import { Autocomplete } from '@aniruddha1806/autocomplete';

function StrictModeExample() {
  const programmingLanguages = [
    "JavaScript", "TypeScript", "Python", "Java", "C#", 
    "C++", "PHP", "Ruby", "Swift", "Go"
  ];

  return (
    <Autocomplete 
      words={programmingLanguages}
      strictMode={true}
      placeholder="Search languages..."
      animationPreset="scale"
    />
  );
}

With Animation Presets

Different animation styles for the dropdown:

import { Autocomplete } from '@aniruddha1806/autocomplete';

function AnimationExample() {
  const colors = [
    "Red", "Blue", "Green", "Yellow", "Purple", 
    "Orange", "Pink", "Cyan", "Magenta", "Lime"
  ];

  return (
    <div>
      {/* Fade animation */}
      <Autocomplete 
        words={colors}
        animationPreset="fade"
        placeholder="Fade animation..."
      />
      
      {/* Slide animation */}
      <Autocomplete 
        words={colors}
        animationPreset="slide"
        placeholder="Slide animation..."
      />
      
      {/* Scale animation */}
      <Autocomplete 
        words={colors}
        animationPreset="scale"
        placeholder="Scale animation..."
      />
      
      {/* No animation */}
      <Autocomplete 
        words={colors}
        animated={false}
        placeholder="No animation..."
      />
    </div>
  );
}

With Custom Icons

Using custom icons for input and items:

import { Autocomplete } from '@aniruddha1806/autocomplete';
import { User, Star } from 'lucide-react';

function CustomIconExample() {
  const users = [
    "John Doe", "Jane Smith", "Bob Johnson", "Alice Brown", 
    "Charlie Wilson", "Diana Davis", "Eve Miller", "Frank Garcia"
  ];

  return (
    <Autocomplete 
      words={users}
      mode="advanced"
      inputIcon={<User size={16} />}
      itemIcon={<Star size={14} />}
      placeholder="Search users..."
    />
  );
}

TypeScript Support

The component is written in TypeScript and includes full type definitions:

import { Autocomplete, AutocompleteProps } from '@aniruddha1806/autocomplete';

interface MyComponentProps {
  searchOptions: string[];
}

const MyComponent: React.FC<MyComponentProps> = ({ searchOptions }) => {
  const handleSelection = (selectedWord: string): void => {
    console.log('Selected:', selectedWord);
  };

  return (
    <Autocomplete
      words={searchOptions}
      onSelect={handleSelection}
      mode="advanced"
      strictMode={true}
    />
  );
};