1.0.8 • Published 7 months ago

react-typeahead-widget v1.0.8

Weekly downloads
-
License
ISC
Repository
github
Last release
7 months ago

React Typeahead Component

A highly customizable React Typeahead component with TypeScript support, built with performance and accessibility in mind.

Features

  • 🚀 Performance optimized with built-in debouncing
  • ♿️ Fully accessible with ARIA attributes
  • 💅 Customizable styling with modular CSS
  • 🎹 Keyboard navigation support (Arrow keys, Enter, Escape)
  • 🔄 Built-in result caching
  • 📱 Mobile-friendly design
  • 📦 Small bundle size with tree-shaking
  • 💪 TypeScript support with full type definitions

Installation

npm install react-typeahead-component

Running Examples

To run the examples locally:

npm run start:examples

This will start a development server using Parcel and open the examples in your browser (typically at http://localhost:1234).

Props

PropTypeDefaultDescription
onSearch(query: string) => Promise<TypeaheadItem[]>RequiredFunction to fetch search results
onSelect(item: TypeaheadItem) => voidRequiredCallback when item is selected
placeholderstring"Search..."Input placeholder text
debounceTimenumber300Debounce time in milliseconds
maxResultsnumber10Maximum number of results to display
minQueryLengthnumber2Minimum query length to trigger search
renderItem(item: TypeaheadItem) => ReactNodeundefinedCustom item renderer
cacheTimenumber300000Cache duration in milliseconds

License

MIT © Shivam Jha

Examples

Example implementations can be found in the /examples directory of this repository.

Custom Rendering

import { Typeahead } from "react-typeahead-component";

const CustomExample = () => {
  const renderItem = (item) => (
    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
      <img
        src={item.avatar}
        alt=""
        style={{ width: 24, height: 24, borderRadius: "50%" }}
      />
      <span>{item.label}</span>
    </div>
  );

  return (
    <Typeahead
      onSearch={handleSearch}
      onSelect={handleSelect}
      renderItem={renderItem}
      placeholder="Search users..."
    />
  );
};

Form Integration

import React, { useState } from "react";
import { Typeahead } from "react-typeahead-component";

const FormExample = () => {
  const [formData, setFormData] = useState({ userId: "", userName: "" });

  return (
    <form>
      <Typeahead
        onSearch={handleSearch}
        onSelect={(item) => {
          setFormData({
            userId: item.id,
            userName: item.label,
          });
        }}
        placeholder="Select user..."
      />
    </form>
  );
};
1.0.8

7 months ago

1.0.7

7 months ago

1.0.6

7 months ago

1.0.5

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago