at-react-autocomplete-1
Advanced tools
at-react-autocomplete-1 - npm Package Compare versions
Comparing version 1.0.0 to 1.2.0
| { | ||
| "name": "at-react-autocomplete-1", | ||
| "version": "1.0.0", | ||
| "description": "A custom React button component with ripple effects", | ||
| "version": "1.2.0", | ||
| "description": "An auto complete dropdown component for React with TypeScript support.", | ||
| "main": "dist/Index.js", | ||
@@ -6,0 +6,0 @@ "types": "dist/Index.d.ts", |
@@ -18,2 +18,8 @@ # AutocompleteDropdown | ||
| - 🎛 Controlled component pattern | ||
| - Keyboard Accessible: Navigate with ↑/↓ arrows and select with Enter | ||
| - Debounced Input: Built-in debouncing for API calls | ||
| - Customizable Rendering: Full control over item rendering | ||
| - TypeScript Ready: First-class TypeScript support | ||
| - Controlled Component: Predictable state management | ||
| - Loading States: Built-in loading indicator support | ||
@@ -26,34 +32,33 @@ ## Installation | ||
| yarn add autocomplete-dropdown | ||
| ``` | ||
| ## Features | ||
| - Keyboard Accessible: Navigate with ↑/↓ arrows and select with Enter | ||
| - Debounced Input: Built-in debouncing for API calls | ||
| - Customizable Rendering: Full control over item rendering | ||
| - TypeScript Ready: First-class TypeScript support | ||
| - Controlled Component: Predictable state management | ||
| - Loading States: Built-in loading indicator support | ||
| ## Props | ||
| Features | ||
| Keyboard Accessible: Navigate with ↑/↓ arrows and select with Enter | ||
| | Prop | Type | Description | | ||
| |------|------|-------------| | ||
| | `suggestions` | `T[]` | Array of suggestions to display | | ||
| | `onInputChange` | `(value: string) => void` | Called when input changes (debounced) | | ||
| | `onSelect` | `(item: T) => void` | Called when item is selected | | ||
| | `renderItem` | `(item: T) => React.ReactNode` | Renders each dropdown item | | ||
| | `inputValue` | `string` | Current input value | | ||
| | `setInputValue` | `(value: string) => void` | Updates input value | | ||
| | `getDisplayValue?` | `(item: T) => string` | Gets display value for input (default: `item.toString()`) | | ||
| | `placeholder?` | `string` | Input placeholder text (optional) | | ||
| | `isLoading?` | `boolean` | Shows loading indicator (optional) | | ||
| | `minSearchLength?` | `number` | Minimum chars before searching (default: 2) (optional) | | ||
| | `debounceDelay?` | `number` | Debounce delay in ms (default: 300) (optional) | | ||
| Debounced Input: Built-in debouncing for API calls | ||
| ## Advanced Examples | ||
| Customizable Rendering: Full control over item rendering | ||
| ### With API Fetching | ||
| TypeScript Ready: First-class TypeScript support | ||
| Controlled Component: Predictable state management | ||
| Loading States: Built-in loading indicator support | ||
| Props | ||
| Prop Type Description | ||
| suggestions T[] Array of suggestions to display | ||
| onInputChange (value: string) => void Called when input changes (debounced) | ||
| onSelect (item: T) => void Called when item is selected | ||
| renderItem (item: T) => React.ReactNode Renders each dropdown item | ||
| inputValue string Current input value | ||
| setInputValue (value: string) => void Updates input value | ||
| getDisplayValue? (item: T) => string Gets display value for input (default: item.toString()) | ||
| placeholder? string Input placeholder text | ||
| isLoading? boolean Shows loading indicator | ||
| minSearchLength? number Minimum chars before searching (default: 2) | ||
| debounceDelay? number Debounce delay in ms (default: 300) | ||
| Advanced Examples | ||
| With API Fetching | ||
| tsx | ||
| ```tsx | ||
| const SearchUsers = () => { | ||
@@ -88,7 +93,10 @@ const [input, setInput] = useState(''); | ||
| ); | ||
| }; | ||
| Custom Styling | ||
| }; | ||
| ``` | ||
| ## Custom Styling | ||
| Add your own CSS classes: | ||
| css | ||
| ```css | ||
| /* Custom styles */ | ||
@@ -108,6 +116,8 @@ .autocomplete-dropdown { | ||
| } | ||
| ``` | ||
| TypeScript Usage | ||
| The component works beautifully with TypeScript: | ||
| tsx | ||
| ```tsx | ||
| interface City { | ||
@@ -130,11 +140,3 @@ id: string; | ||
| /> | ||
| Accessibility | ||
| The component includes: | ||
| ``` | ||
| ARIA attributes for screen readers | ||
| Keyboard navigation support | ||
| Focus management | ||
| Proper role attributes |
No alert changes
Improved metrics
- Total package byte prevSize
19677
2.56%- Number of lines in readme file
138
2.22%No dependency changes