react-autocomplete-pro 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +130 -2
  2. package/package.json +5 -1
package/README.md CHANGED
@@ -1,3 +1,131 @@
1
- React Autocomplete Pro Component
1
+ # React Autocomplete Pro Component
2
2
 
3
- [Documentation](https://evaficy.com/react-autocomplete-pro-component-documentation)
3
+ [Full Documentation](https://evaficy.com/autocompletepro-advanced-react-autocomplete-component/)
4
+
5
+ A feature-rich, highly customizable React autocomplete component with advanced search capabilities and rich user experiences.
6
+
7
+ ## Features
8
+
9
+ - **Advanced Search Algorithms**: Fuzzy, exact, semantic, and hybrid matching
10
+ - **Rich Visual Interface**: Images, descriptions, categories, and trending indicators
11
+ - **Performance Optimized**: Debounced search, memoized calculations, efficient rendering
12
+ - **Multi-Select Support**: Elegant tag management with custom renderers
13
+ - **Async Data Loading**: Built-in support for remote data fetching
14
+ - **Fully Customizable**: Custom option/tag renderers, flexible styling
15
+ - **TypeScript Support**: Complete type safety and IntelliSense
16
+ - **Keyboard Navigation**: Full accessibility with arrow keys, enter, escape
17
+
18
+ ## Installation
19
+
20
+ ```bash
21
+ npm install react-autocomplete-pro
22
+ # or
23
+ yarn add react-autocomplete-pro
24
+ ```
25
+
26
+ ## Quick Start
27
+
28
+ ### Basic Usage
29
+
30
+ ```tsx
31
+ import React, { useState } from 'react';
32
+ import { AutocompletePro, AutocompleteOption } from 'react-autocomplete-pro';
33
+
34
+ const options: AutocompleteOption[] = [
35
+ { id: '1', label: 'iPhone 15 Pro', value: 'iphone-15-pro' },
36
+ { id: '2', label: 'Samsung Galaxy S24', value: 'samsung-s24' },
37
+ { id: '3', label: 'MacBook Pro M3', value: 'macbook-pro-m3' }
38
+ ];
39
+
40
+ function App() {
41
+ const [selected, setSelected] = useState<AutocompleteOption | undefined>();
42
+
43
+ return (
44
+ <AutocompletePro
45
+ options={options}
46
+ value={selected}
47
+ onChange={setSelected}
48
+ placeholder="Search products..."
49
+ />
50
+ );
51
+ }
52
+ ```
53
+
54
+ ### Multi-Select with Categories
55
+
56
+ ```tsx
57
+ <AutocompletePro
58
+ options={options}
59
+ value={selectedItems}
60
+ onChange={setSelectedItems}
61
+ multiple={true}
62
+ showCategories={true}
63
+ showTrending={true}
64
+ groupBy={(option) => option.category}
65
+ placeholder="Select multiple products..."
66
+ />
67
+ ```
68
+
69
+ ### Fuzzy Search with Typo Tolerance
70
+
71
+ ```tsx
72
+ <AutocompletePro
73
+ options={options}
74
+ searchConfig={{
75
+ algorithm: 'fuzzy',
76
+ fuzzyThreshold: 0.5
77
+ }}
78
+ placeholder="Try typos: 'macbok', 'ipone'..."
79
+ />
80
+ ```
81
+
82
+ ### Async Search
83
+
84
+ ```tsx
85
+ const handleAsyncSearch = async (query: string): Promise<AutocompleteOption[]> => {
86
+ const response = await fetch(`/api/search?q=${query}`);
87
+ return response.json();
88
+ };
89
+
90
+ <AutocompletePro
91
+ options={[]}
92
+ onSearch={handleAsyncSearch}
93
+ searchConfig={{
94
+ debounceMs: 300,
95
+ minQueryLength: 2
96
+ }}
97
+ placeholder="Type to search..."
98
+ />
99
+ ```
100
+
101
+ ## Key Props
102
+
103
+ | Prop | Type | Description |
104
+ |------|------|-------------|
105
+ | `options` | `AutocompleteOption[]` | Static options array |
106
+ | `value` | `AutocompleteOption \| AutocompleteOption[]` | Selected value(s) |
107
+ | `onChange` | `(selected) => void` | Selection change handler |
108
+ | `onSearch` | `(query: string) => Promise<AutocompleteOption[]>` | Async search function |
109
+ | `multiple` | `boolean` | Enable multi-select mode |
110
+ | `searchConfig` | `SearchConfig` | Search algorithm configuration |
111
+ | `renderOption` | `(option, isHighlighted) => ReactNode` | Custom option renderer |
112
+ | `showCategories` | `boolean` | Show category grouping |
113
+ | `showTrending` | `boolean` | Show trending indicators |
114
+
115
+ ## Search Algorithms
116
+
117
+ - **`exact`**: Traditional substring matching
118
+ - **`fuzzy`**: Levenshtein distance-based matching for typos
119
+ - **`semantic`**: Word-based matching across multiple fields
120
+ - **`hybrid`**: Combines exact and fuzzy for optimal results
121
+
122
+ ## Browser Support
123
+
124
+ - Chrome 60+
125
+ - Firefox 60+
126
+ - Safari 12+
127
+ - Edge 79+
128
+
129
+ ## License
130
+
131
+ MIT License
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-autocomplete-pro",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "description": "Advanced React autocomplete component with fuzzy search, rich results, multi-select, and TypeScript support. Features intelligent suggestions, category grouping, and async data loading.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -9,6 +9,10 @@
9
9
  "files": [
10
10
  "dist"
11
11
  ],
12
+ "funding": {
13
+ "type": "github",
14
+ "url": "https://github.com/sponsors/programmer4web"
15
+ },
12
16
  "scripts": {
13
17
  "build": "yarn build:css && node node_modules/rollup/dist/bin/rollup -c rollup.config.js",
14
18
  "build:css": "npx postcss src/output.css -o dist/index.css --verbose",