Asyncr

Advanced Async Select Component for React and ShadCN UI

This Async Select component, designed for React applications, provides a sophisticated way to handle dynamic data selection. Built using TypeScript and integrating seamlessly with shadcn/ui's Popover and Command components, it offers developers a modern, accessible, and highly customizable solution for creating user-friendly select inputs that fetch options asynchronously, enhancing form interactivity and data handling.

Features:

• Async Data Fetching: Utilizes a fetcher function (e.g., (query?: string) => Promise) to dynamically load options.
• Custom Option Rendering: Allows defining how each option is displayed in the dropdown via the renderOption prop.
• Value Management: Employs getOptionValue for unique option identification and getDisplayValue for custom display of the selected item.
• Preload Mode: Supports preloading all options (preload: boolean) with an optional filterFn for client-side searching.
• Custom States: Provides props for custom 'not found' messages/components (notFound), loading indicators (loadingSkeleton), and 'no results' messages (noResultsMessage).
• Configurable Appearance: Offers options for placeholder text, width customization, and applying custom CSS classes (className for popover, triggerClassName for the button).
• Accessibility and Control: Includes features like a disabled state and a clearable option (defaults to true) to remove selections.
• TypeScript Support: Built with TypeScript, offering an AsyncSelectProps interface for strong typing.
• ShadCN UI Composition: Leverages and components from ShadCN UI for its underlying structure and functionality.
• Required Core Props: Ensures essential operation through mandatory props like value, onChange, and label.

Summary:

This React component delivers a feature-rich async select input, enabling developers to implement dynamic data fetching and selection with ease. It supports extensive customization for rendering options, handling selected values, and managing various states like loading or empty results. Built with TypeScript and utilizing ShadCN UI components, it provides a robust and accessible solution for modern web forms, offering both asynchronous and preloading modes for flexible data handling strategies.