{"_id":"@aniruddha1806/autocomplete","_rev":"7-8572dc0d478776e30f371325bb727da1","name":"@aniruddha1806/autocomplete","dist-tags":{"latest":"1.3.4"},"versions":{"1.1.0":{"name":"@aniruddha1806/autocomplete","version":"1.1.0","keywords":["react","autocomplete","tailwindcss","framer-motion","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","_id":"@aniruddha1806/autocomplete@1.1.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"dd3149b88f3a7d891e7ce799b937753ca02c0cb7","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.1.0.tgz","fileCount":6,"integrity":"sha512-lVKu7eGOfBc0CFH1DbreHT831EQRB2pqjAZRuLZwg7ldJXo6G0BN6zQn6W7/YLLOyhMkCPkmKWuYbvrzTjV+oA==","signatures":[{"sig":"MEUCIQCI3YFR98VTlgSR2njuTXIJAKnnw/66JIyDTxVsBv5qGgIgKGxV15nJQJTb5f+1AMhcckzZt9NkNCbUrLTQvXXHmsw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67069},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"Advanced autocomplete component with Tailwind CSS and Framer Motion","directories":{},"_nodeVersion":"20.14.0","dependencies":{"motion":"^12.6.2","lucide-react":"^0.486.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^2.79.2","postcss":"^8.5.3","typescript":"^4.9.5","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^22.0.2","rollup-plugin-typescript2":"^0.32.1","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/autocomplete_1.1.0_1743511402734_0.3951553716822791","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@aniruddha1806/autocomplete","version":"1.2.0","keywords":["react","autocomplete","tailwindcss","framer-motion","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","_id":"@aniruddha1806/autocomplete@1.2.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"7b0f44ff9cd204e620ec069559a42f7f3787f389","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.2.0.tgz","fileCount":6,"integrity":"sha512-gjJsgXG6MMd+o1g0EC27FsB2SlAG1yshbdf6LGLymUacA2SOVhaBK7qDRhUQi35uzkJT82gN9W7t7dlhHE4rug==","signatures":[{"sig":"MEYCIQC28lTQVzwHwxrjIwNwQ2JgYWfhhKUs35vdQCLCNZXOWgIhANqzQmL0RZ0aAwzNnfSZrco9139fB2VpZlwGDGonXHq+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69894},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"Advanced autocomplete component with Tailwind CSS and Framer Motion","directories":{},"_nodeVersion":"20.14.0","dependencies":{"motion":"^12.6.2","lucide-react":"^0.486.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^2.79.2","postcss":"^8.5.3","typescript":"^4.9.5","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^22.0.2","rollup-plugin-typescript2":"^0.32.1","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/autocomplete_1.2.0_1744723872161_0.10255934263692024","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@aniruddha1806/autocomplete","version":"1.3.0","keywords":["react","autocomplete","tailwindcss","framer-motion","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","_id":"@aniruddha1806/autocomplete@1.3.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"a19f55d33ebb5ab3ecfc379693716376f179a2cc","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.3.0.tgz","fileCount":7,"integrity":"sha512-3YvgYGCTsZtpjmvkMIgYmIJebU6jlcOPHxaVOFncOiWQts+TxsN6YxKeI8sR8N3laR1F/5KViMxw96/N9Hg5DA==","signatures":[{"sig":"MEUCIH5+iU8KS9aoeUqSIoxQE0cFkVyrAK7j9qVqkq2CkuLpAiEAkZDR7ww2kmyT7Nf48m/xeQGzU9OyZjWvghaABh8n7SE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76551},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"Advanced autocomplete component ","directories":{},"_nodeVersion":"20.14.0","dependencies":{"motion":"^12.6.2","lucide-react":"^0.486.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^2.79.2","postcss":"^8.5.3","typescript":"^4.9.5","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^22.0.2","rollup-plugin-typescript2":"^0.32.1","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/autocomplete_1.3.0_1749120759910_0.2946967959860487","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"@aniruddha1806/autocomplete","version":"1.3.1","keywords":["react","autocomplete","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","_id":"@aniruddha1806/autocomplete@1.3.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"ad5bb9deb39d3252b924a669d7453119182ad9ff","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.3.1.tgz","fileCount":7,"integrity":"sha512-ehjD/4+ZzReGiMERZwKDjhshAN4495Xnmq1Xm1COPrqnwnxES5AjEFZnUsIvvCvsS2KXIgeavKQhkv0dssNuEg==","signatures":[{"sig":"MEYCIQCngEdzonMhnPX0pOro2haXwwGSVKqZEOqKo+FlpsSICwIhAIp+N8BUJMAs8dmlPaySR7lMPh0eK1d0unhXeVGqJH6H","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76479},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"Advanced autocomplete component ","directories":{},"_nodeVersion":"20.14.0","dependencies":{"motion":"^12.6.2","lucide-react":"^0.486.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^2.79.2","postcss":"^8.5.3","typescript":"^4.9.5","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^22.0.2","rollup-plugin-typescript2":"^0.32.1","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/autocomplete_1.3.1_1749120952992_0.7103185517796304","host":"s3://npm-registry-packages-npm-production"}},"1.3.2":{"name":"@aniruddha1806/autocomplete","version":"1.3.2","keywords":["react","autocomplete","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","_id":"@aniruddha1806/autocomplete@1.3.2","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"78e18aef66039b242c2a410b3573b267bab3b134","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.3.2.tgz","fileCount":7,"integrity":"sha512-yzecXPphOKaK2JSIKEDShm/xSCSws1rvqXWnx4fPhbhz/8WFo0Xk0YHXHfVFRPkeaN85UDKygiGJ83NT/uNjtw==","signatures":[{"sig":"MEUCIBUTVIXZzpt/TFWHmoARHf+vfY1F0fQANeAsbcNTxKxwAiEAg7nwiez2ySvtT+yvh9vOM6h9nqJ+0ywAWnDhYTlVm+M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76491},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"Advanced autocomplete component ","directories":{},"_nodeVersion":"20.14.0","dependencies":{"motion":"^12.6.2","lucide-react":"^0.486.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^2.79.2","postcss":"^8.5.3","typescript":"^4.9.5","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^22.0.2","rollup-plugin-typescript2":"^0.32.1","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/autocomplete_1.3.2_1749121113201_0.4607611413014261","host":"s3://npm-registry-packages-npm-production"}},"1.3.3":{"name":"@aniruddha1806/autocomplete","version":"1.3.3","keywords":["react","autocomplete","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","_id":"@aniruddha1806/autocomplete@1.3.3","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"dd63a56c4b395c50707e7fdfe6cac770318413c3","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.3.3.tgz","fileCount":7,"integrity":"sha512-keEwVQgudUAnG+AEvLH2I6OP7De7xObTTzzWKtby5NFIEuEGkM0DkwB2gDhRyLuMhjL+v2P0NzqtVvxwb5Nzpg==","signatures":[{"sig":"MEUCIBGkC98pO7g3n0TeQhX/aE9nQ9RohfQ6AqiTASKjvmHeAiEA5LsjTzN4u9+19zKgq1FIvDEHp957yvsu6lQiB7D6yIk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76491},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"Advanced autocomplete component ","directories":{},"_nodeVersion":"20.14.0","dependencies":{"motion":"^12.6.2","lucide-react":"^0.486.0"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^2.79.2","postcss":"^8.5.3","typescript":"^4.9.5","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^22.0.2","rollup-plugin-typescript2":"^0.32.1","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0","framer-motion":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/autocomplete_1.3.3_1749121265864_0.17295707838429575","host":"s3://npm-registry-packages-npm-production"}},"1.3.4":{"name":"@aniruddha1806/autocomplete","version":"1.3.4","description":"Advanced autocomplete component ","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","prepublishOnly":"npm run build"},"peerDependencies":{"framer-motion":">=4.0.0","react":">=16.8.0","react-dom":">=16.8.0","tailwindcss":">=2.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.2","@rollup/plugin-node-resolve":"^13.3.0","@types/react":"^18.3.20","@types/react-dom":"^18.3.5","postcss":"^8.5.3","rollup":"^2.79.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","rollup-plugin-typescript2":"^0.32.1","typescript":"^4.9.5"},"keywords":["react","autocomplete","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","dependencies":{"lucide-react":"^0.486.0","motion":"^12.6.2"},"_id":"@aniruddha1806/autocomplete@1.3.4","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-OAV6t5KQkZ+iuNYzT8Q4Xs5P3SsEN6QRmVEsoIuItzJfvnZtHrLCwap9OzdQa+mTezglKNHwM4jNWtjpR6wXNA==","shasum":"28fe900f9f5ad12cf93412ef3c452aa6bf85aa01","tarball":"https://registry.npmjs.org/@aniruddha1806/autocomplete/-/autocomplete-1.3.4.tgz","fileCount":7,"unpackedSize":75912,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF7g0CbI8EnUHgyU/M3wCql2XU/YQlHlg0Q3gDhv5w1AAiBzMdFs6QsYr/xK585aDw5VOns/BT8GFmK5m6+JcDsnGg=="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/autocomplete_1.3.4_1749122213659_0.3079245483705133"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-01T12:43:22.646Z","modified":"2025-06-05T11:16:54.389Z","1.1.0":"2025-04-01T12:43:22.923Z","1.2.0":"2025-04-15T13:31:12.341Z","1.3.0":"2025-06-05T10:52:40.092Z","1.3.1":"2025-06-05T10:55:53.186Z","1.3.2":"2025-06-05T10:58:33.378Z","1.3.3":"2025-06-05T11:01:06.081Z","1.3.4":"2025-06-05T11:16:53.862Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","autocomplete","typescript"],"description":"Advanced autocomplete component ","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Autocomplete Component\r\n\r\nA lightweight, customizable autocomplete component for React applications with zero dependencies. This component provides a searchable dropdown with various animation options, styling customizations, and both basic and advanced modes.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/autocomplete\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 🔍 Simple search functionality with filtering options\r\n- 🎨 Fully customizable styling\r\n- ✨ Built-in animations with multiple presets\r\n- 🌙 Dark mode support\r\n- 🧩 Basic and advanced display modes\r\n- 🔄 Zero external dependencies\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport { Autocomplete } from '@aniruddha1806/autocomplete';\r\n\r\nfunction App() {\r\n  const fruits = [\r\n    \"Apple\", \"Banana\", \"Cherry\", \"Date\", \"Elderberry\",\r\n    \"Fig\", \"Grape\", \"Honeydew\", \"Kiwi\", \"Lemon\"\r\n  ];\r\n\r\n  const handleSelect = (word) => {\r\n    console.log(`Selected: \\${word}`);\r\n  };\r\n\r\n  return (\r\n    <Autocomplete \r\n      words={fruits}\r\n      onSelect={handleSelect}\r\n      placeholder=\"Search fruits...\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `words` | `string[]` | `[]` | Array of strings to be used as autocomplete options |\r\n| `mode` | `\"basic\" \\\\| \"advanced\"` | `\"basic\"` | Display mode of the component |\r\n| `strictMode` | `boolean` | `false` | When true, only shows results that start with the input value |\r\n| `className` | `string` | `\"\"` | Additional class name for the root element |\r\n| `inputClassName` | `string` | `\"\"` | Additional class name for the input element |\r\n| `dropdownClassName` | `string` | `\"\"` | Additional class name for the dropdown container |\r\n| `itemClassName` | `string` | `\"\"` | Additional class name for dropdown items |\r\n| `inputIcon` | `ReactNode` | `<SearchIcon />` | Custom icon for the input field |\r\n| `itemIcon` | `ReactNode` | `undefined` | Icon to display next to items (only in advanced mode) |\r\n| `placeholder` | `string` | `\"Search...\"` | Placeholder text for the input |\r\n| `animationPreset` | `\"fade\" \\\\| \"slide\" \\\\| \"scale\"` |` \" fade\"  ` | Animation style for the dropdown |\r\n| `animated` | `boolean` | `true` | Enable/disable animations |\r\n| `onSelect` | `(word: string) => void` | `undefined` | Callback function when an item is selected |\r\n\r\n## Examples\r\n\r\n### Basic Mode\r\n\r\nThe default mode with simple styling:\r\n\r\n```jsx\r\nimport { Autocomplete } from '@aniruddha1806/autocomplete';\r\n\r\nfunction BasicExample() {\r\n  const countries = [\r\n    \"United States\", \"Canada\", \"United Kingdom\", \"Australia\", \r\n    \"Germany\", \"France\", \"Japan\", \"Brazil\", \"India\", \"China\"\r\n  ];\r\n\r\n  return (\r\n    <Autocomplete \r\n      words={countries}\r\n      placeholder=\"Search countries...\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Advanced Mode\r\n\r\nAdvanced mode with item icons:\r\n\r\n```jsx\r\nimport { Autocomplete } from '@aniruddha1806/autocomplete';\r\nimport { Globe } from 'lucide-react'; // Example icon library\r\n\r\nfunction AdvancedExample() {\r\n  const countries = [\r\n    \"United States\", \"Canada\", \"United Kingdom\", \"Australia\", \r\n    \"Germany\", \"France\", \"Japan\", \"Brazil\", \"India\", \"China\"\r\n  ];\r\n\r\n  return (\r\n    <Autocomplete \r\n      words={countries}\r\n      mode=\"advanced\"\r\n      itemIcon={<Globe size={16} />}\r\n      placeholder=\"Search countries...\"\r\n      animationPreset=\"slide\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### With Strict Mode\r\n\r\nOnly show results that start with the input value:\r\n\r\n```jsx\r\nimport { Autocomplete } from '@aniruddha1806/autocomplete';\r\n\r\nfunction StrictModeExample() {\r\n  const programmingLanguages = [\r\n    \"JavaScript\", \"TypeScript\", \"Python\", \"Java\", \"C#\", \r\n    \"C++\", \"PHP\", \"Ruby\", \"Swift\", \"Go\"\r\n  ];\r\n\r\n  return (\r\n    <Autocomplete \r\n      words={programmingLanguages}\r\n      strictMode={true}\r\n      placeholder=\"Search languages...\"\r\n      animationPreset=\"scale\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n### With Animation Presets\r\n\r\nDifferent animation styles for the dropdown:\r\n\r\n```jsx\r\nimport { Autocomplete } from '@aniruddha1806/autocomplete';\r\n\r\nfunction AnimationExample() {\r\n  const colors = [\r\n    \"Red\", \"Blue\", \"Green\", \"Yellow\", \"Purple\", \r\n    \"Orange\", \"Pink\", \"Cyan\", \"Magenta\", \"Lime\"\r\n  ];\r\n\r\n  return (\r\n    <div>\r\n      {/* Fade animation */}\r\n      <Autocomplete \r\n        words={colors}\r\n        animationPreset=\"fade\"\r\n        placeholder=\"Fade animation...\"\r\n      />\r\n      \r\n      {/* Slide animation */}\r\n      <Autocomplete \r\n        words={colors}\r\n        animationPreset=\"slide\"\r\n        placeholder=\"Slide animation...\"\r\n      />\r\n      \r\n      {/* Scale animation */}\r\n      <Autocomplete \r\n        words={colors}\r\n        animationPreset=\"scale\"\r\n        placeholder=\"Scale animation...\"\r\n      />\r\n      \r\n      {/* No animation */}\r\n      <Autocomplete \r\n        words={colors}\r\n        animated={false}\r\n        placeholder=\"No animation...\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### With Custom Icons\r\n\r\nUsing custom icons for input and items:\r\n\r\n```jsx\r\nimport { Autocomplete } from '@aniruddha1806/autocomplete';\r\nimport { User, Star } from 'lucide-react';\r\n\r\nfunction CustomIconExample() {\r\n  const users = [\r\n    \"John Doe\", \"Jane Smith\", \"Bob Johnson\", \"Alice Brown\", \r\n    \"Charlie Wilson\", \"Diana Davis\", \"Eve Miller\", \"Frank Garcia\"\r\n  ];\r\n\r\n  return (\r\n    <Autocomplete \r\n      words={users}\r\n      mode=\"advanced\"\r\n      inputIcon={<User size={16} />}\r\n      itemIcon={<Star size={14} />}\r\n      placeholder=\"Search users...\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n\r\n## TypeScript Support\r\n\r\nThe component is written in TypeScript and includes full type definitions:\r\n\r\n```typescript\r\nimport { Autocomplete, AutocompleteProps } from '@aniruddha1806/autocomplete';\r\n\r\ninterface MyComponentProps {\r\n  searchOptions: string[];\r\n}\r\n\r\nconst MyComponent: React.FC<MyComponentProps> = ({ searchOptions }) => {\r\n  const handleSelection = (selectedWord: string): void => {\r\n    console.log('Selected:', selectedWord);\r\n  };\r\n\r\n  return (\r\n    <Autocomplete\r\n      words={searchOptions}\r\n      onSelect={handleSelection}\r\n      mode=\"advanced\"\r\n      strictMode={true}\r\n    />\r\n  );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}