https://github.com/pdevito3/wispe
🧚 A headless autocomplete for React with a Tanstack inspired API and rich interactions
https://github.com/pdevito3/wispe
Last synced: 24 days ago
JSON representation
🧚 A headless autocomplete for React with a Tanstack inspired API and rich interactions
- Host: GitHub
- URL: https://github.com/pdevito3/wispe
- Owner: pdevito3
- License: mit
- Created: 2025-05-26T01:45:13.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-06-20T21:25:37.000Z (8 months ago)
- Last Synced: 2025-06-20T21:30:55.568Z (8 months ago)
- Language: TypeScript
- Size: 503 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wispe
Wispe is an autocomplete component for React that is unstyled (headless) and has a Tanstack inspired API with rich interactions.
> [!IMPORTANT]
> While usable, Wispe is still currently in development and may still undergo some breaking changes as I near BETA and gather feedback. I invite you at to try it out and provide feedback to help shape the final product! If you choose to ship with this to production, I recommend locking your dependencies to a specific version and keeping up with the latest releases.
## Documentation
Visit https://wispe.dev/docs to view the documentation.
## Usage
To start using the library, install it in your project:
```bash
npm install @wispe/wispe-react
```
Use `useAutoComplete` to establish your incoming autocomplete state and use the return values to compose your actual component.
```tsx
import { useAutoComplete } from "@wispe/wispe-react";
export interface User {
id: number;
name: string;
}
export const users: User[] = [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Jane Smith" },
{ id: 3, name: "Bob Johnson" },
{ id: 4, name: "Alice Brown" },
{ id: 5, name: "Charlie Wilson" },
];
export function BasicAutocomplete() {
const {
getRootProps,
getLabelProps,
getInputProps,
getListProps,
getItemProps,
getItemState,
getItems,
isOpen,
} = useAutoComplete({
items: users,
onFilterAsync: async ({ searchTerm }) =>
users.filter((u) =>
u.name.toLowerCase().includes(searchTerm.toLowerCase())
),
itemToString: (u) => u.name,
});
return (
<>
Search users
{isOpen && (
{getItems().map((user) => (
-
{user.name} {getItemState(user).isSelected && ✓}
))}
)}
>
);
}
```
## Feature Summary
- 100% TypeScript (but not required)
- Headless (100% customizable, Bring-your-own-UI)
- Auto out of the box, opt-in controllable state
- Keyboard Navigation (and overall a11y support)
- Flexible Filtering Options
- 1st Class Async Data Support
- Built in Debounce Option
- Single or Multi-Select
- Tab Navigation
- Grouping & Aggregation
- Link Items
- Action Items
- Create New Items
- Clearable
- Animatable
- Virtualizable