1.0.8 • Published 7 months ago
react-typeahead-widget v1.0.8
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
Prop | Type | Default | Description |
---|---|---|---|
onSearch | (query: string) => Promise<TypeaheadItem[]> | Required | Function to fetch search results |
onSelect | (item: TypeaheadItem) => void | Required | Callback when item is selected |
placeholder | string | "Search..." | Input placeholder text |
debounceTime | number | 300 | Debounce time in milliseconds |
maxResults | number | 10 | Maximum number of results to display |
minQueryLength | number | 2 | Minimum query length to trigger search |
renderItem | (item: TypeaheadItem) => ReactNode | undefined | Custom item renderer |
cacheTime | number | 300000 | Cache 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>
);
};