{"_id":"@420rollerrr/react-search-autocomplete","_rev":"1-b7f4bea0da8028e1059bf8bbcd0d7ada","name":"@420rollerrr/react-search-autocomplete","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@420rollerrr/react-search-autocomplete","author":{"name":"Reale Roberto Josef Antonio"},"license":"MIT","version":"1.0.0","description":"A search box for React","main":"dist/index.js","scripts":{"test":"jest --verbose --runInBand","coverage":"jest --coverage","deploy":"yarn build && npm publish","build":"rm -rf ./dist && tsc --emitDeclarationOnly && babel src --out-dir dist --extensions '.ts,.tsx,.js' --ignore /**/*.test.tsx","build-watch":"rm -rf ./dist && tsc --emitDeclarationOnly && babel --watch src --out-dir dist --extensions '.ts,.tsx,.js' --ignore /**/*.test.tsx","typecheck":"tsc --noEmit"},"repository":{"type":"git","url":"git+https://github.com/sickdyd/react-search-autocomplete.git"},"keywords":["search","searchbox","autocomplete","suggestion","suggestions","google","autosuggest","autocomplete","auto suggest","auto complete","react autosuggest","react autocomplete","react auto suggest","react auto complete"],"browserslist":{"production":["> 0.2%","not dead","not op_mini all","not ie <= 11"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"setupFiles":["jest-localstorage-mock"]},"bugs":{"url":"https://github.com/sickdyd/react-search-autocomplete/issues"},"homepage":"https://github.com/sickdyd/react-search-autocomplete#readme","dependencies":{"fuse.js":"^6.5.3","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2 || ^16.0.2","react-dom":"^17.0.2 || ^16.0.2"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/preset-typescript":"^7.16.7","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.6","@types/styled-components":"^5.1.24","babel-minify":"^0.5.1","jest":"^27.5.1","jest-localstorage-mock":"^2.4.6","react":"^17.0.2","react-dom":"^17.0.2","react-test-renderer":"^16.14.0"},"gitHead":"c17301d716749d03f5c323439f83382f41aec95a","_id":"@420rollerrr/react-search-autocomplete@1.0.0","_nodeVersion":"17.0.1","_npmVersion":"8.1.0","dist":{"integrity":"sha512-o5/GmR2OQNYRXG6XuumGzKo3afVnBHVgl8qrx3pfHTeV2IKr236teMUh6w3nn/3lu7l3cFcl/o4xI6LRwHxjdg==","shasum":"7cc4d8aad2f72b300893d0379d2444677468bec7","tarball":"https://registry.npmjs.org/@420rollerrr/react-search-autocomplete/-/react-search-autocomplete-1.0.0.tgz","fileCount":3,"unpackedSize":9701,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLpydq0xoTpM/G3DXVt7C4FrFQwUH0Kqz31OiR9+FTYAIgB/sX6M0admzbh7sEDMmqTbqL51pfYmEtg0jeLq9JumA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYNoDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWlg//bLlY4xGM9TCtzivc3WwoDlkAGl0cN0LDDBerF4VS4HnNGBex\r\nUDIZMJQw5J7K6wVb92rTPojYCjRVb6nbF41/VNiWmY8vLoXoWPHWx4birU7n\r\nZZv1KPxwYSV6Sx4rw2KYzo6vwOk4YnwaLLzdykaeouFhST1ZNfzuKkx6I8L4\r\nayvnjGN0Lym3TfWFxd6e5ZXte75XFbG4OPBzOi0+SwvUc+KDOZVKWhO3Swtn\r\nU4wd7UxCoQCJx4GaU1wZz6d/P0wKmgCFpKrHV299N9Wf3lv7eSx3Ggi+Er/z\r\nHBg3zA0sIRy43XwbwDlmK/1VexIVf8xD3OnLZm7Mt8sDEjIVo7YbwDLsCgo2\r\nhGh/Yb12lQ3OJjtEDfKRxHfBqdRtoJ69Xde2FV+tbb3RsSjjmMyeZs91USOm\r\nplhUE6beYxGeTqOQDW3f7BkN0/A2g6b2DQt/t2mB2Kcr/W98QFVOOK3Rly5t\r\nC18B20sfozzI3r0W+L192EstU7/fVnDF+ME/OyBmk4ttuZOG0L+jiIB5ENv2\r\n8mpsDpfP8R0ZtowHSW/kRnwWBHz11qT6Kq9bnPxYY+xjF5VVfkaTAlKGqQE6\r\nv2LcAfAvqZdJXk9HksftAlx2qbKFvVAi2enh3NoSkqgS+Fhx8tRUT8V+bFq/\r\nFlG5JPMy900zXK58cEDyAwhzkgVBv5eMTzU=\r\n=Dx8B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"420rollerrr","email":"gioviopantat@gmail.com"},"directories":{},"maintainers":[{"name":"420rollerrr","email":"gioviopantat@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-search-autocomplete_1.0.0_1650514435795_0.48508808221243904"},"_hasShrinkwrap":false},"1.0.1":{"name":"@420rollerrr/react-search-autocomplete","author":{"name":"Reale Roberto Josef Antonio"},"license":"MIT","version":"1.0.1","description":"A search box for React","main":"dist/index.js","scripts":{"test":"jest --verbose --runInBand","coverage":"jest --coverage","deploy":"yarn build && npm publish","build":"rm -rf ./dist && tsc --emitDeclarationOnly && babel src --out-dir dist --extensions '.ts,.tsx,.js' --ignore /**/*.test.tsx","build-watch":"rm -rf ./dist && tsc --emitDeclarationOnly && babel --watch src --out-dir dist --extensions '.ts,.tsx,.js' --ignore /**/*.test.tsx","typecheck":"tsc --noEmit"},"repository":{"type":"git","url":"git+https://github.com/sickdyd/react-search-autocomplete.git"},"keywords":["search","searchbox","autocomplete","suggestion","suggestions","google","autosuggest","autocomplete","auto suggest","auto complete","react autosuggest","react autocomplete","react auto suggest","react auto complete"],"browserslist":{"production":["> 0.2%","not dead","not op_mini all","not ie <= 11"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"setupFiles":["jest-localstorage-mock"]},"bugs":{"url":"https://github.com/sickdyd/react-search-autocomplete/issues"},"homepage":"https://github.com/sickdyd/react-search-autocomplete#readme","dependencies":{"fuse.js":"^6.5.3","styled-components":"^5.3.3"},"peerDependencies":{"react":"^17.0.2 || ^16.0.2","react-dom":"^17.0.2 || ^16.0.2"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@babel/preset-typescript":"^7.16.7","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.6","@types/styled-components":"^5.1.24","babel-minify":"^0.5.1","jest":"^27.5.1","jest-localstorage-mock":"^2.4.6","react":"^17.0.2","react-dom":"^17.0.2","react-test-renderer":"^16.14.0"},"gitHead":"c17301d716749d03f5c323439f83382f41aec95a","_id":"@420rollerrr/react-search-autocomplete@1.0.1","_nodeVersion":"17.0.1","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/KiyAM8q9PDjyl9UmNjmjxHWPGX1rdgm9TE/WqiwyGDbB/k3iMyYc3yaQSZWGm6FbZ63jW8f47IVXG/H2TNQCg==","shasum":"429bb7fb19dced872f0b60bf92ff84305a636c6d","tarball":"https://registry.npmjs.org/@420rollerrr/react-search-autocomplete/-/react-search-autocomplete-1.0.1.tgz","fileCount":3,"unpackedSize":9701,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF26+J1JkqLu8I1Ei0q6Ck5MhD2XA9Y4lNL6XaEeDuoFAiEAnTz4dLNILcylJUZ93/pkzV56TRliZSDgKMBL6Wl09ts="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYPGHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6fg//TQ5qCdsdK36nBQFaK1eUTisumJkail9WxSyxZQk4AbZpqD68\r\ng5q28D7c8FUY2bM5lDoAz8Ioup2xhLVAW/l9qRCyy/7y/7QZsEdmu99+J0K1\r\nMvAKpSczKWVxJFSsDvA5PtI74UK9NlLSQMGn1BAn3U4wXMFqnnstYQ63BVH5\r\nn0gj/su2Pyi1gNCvXC4rpZVnOuHJspXKkjNDoLaPUbcd0FTFfcFK/Sxewryh\r\nM5DiP2E9EMs0QzgnnuRXUFjFdX5eYXYJPyv9gns/Fa9+8HOZp4y8xf/n7emZ\r\n0Ok4lQxBTnvRCCRKRevmJxpyJe4UMaFdNvyBOAz+pUhIaYyfal3NlME9mAHS\r\nmR6aoCbioW1LgdoaSzKCa11rITu+tynLJhVEMseQEvYaYTmR4JIbthwjprT9\r\ndCTYeJzQi6RLKsZ8MNlJQjatl27gqdfiMnpEqmpJmxCkN3dI4LyEWafxm7UK\r\ncSgSQTNdjzLD1ZrqNy1Jc36j5Q8nvPn4rV++C1nWT18BMb/B4ARl/iZmOvU8\r\nmlKHnKcVas/g7PRB2H2vCuu4oXyaikjip5OdhjowEg9+LjnYq7tKvzqj7wz7\r\n8Jfxpp9DKkPtpaMBEonwf0cKvZP5q3Hk+hEJqUh/1WXH9ZKoYk0ZkdZBP36x\r\nk7r6etoXhvBnDbGEzcDESlVj/2EVK8vSFvE=\r\n=eoon\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"420rollerrr","email":"gioviopantat@gmail.com"},"directories":{},"maintainers":[{"name":"420rollerrr","email":"gioviopantat@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-search-autocomplete_1.0.1_1650520455686_0.8903625167714844"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-21T04:13:55.706Z","1.0.0":"2022-04-21T04:13:55.956Z","modified":"2022-04-21T05:54:15.895Z","1.0.1":"2022-04-21T05:54:15.829Z"},"maintainers":[{"name":"420rollerrr","email":"gioviopantat@gmail.com"}],"description":"A search box for React","homepage":"https://github.com/sickdyd/react-search-autocomplete#readme","keywords":["search","searchbox","autocomplete","suggestion","suggestions","google","autosuggest","autocomplete","auto suggest","auto complete","react autosuggest","react autocomplete","react auto suggest","react auto complete"],"repository":{"type":"git","url":"git+https://github.com/sickdyd/react-search-autocomplete.git"},"author":{"name":"Reale Roberto Josef Antonio"},"bugs":{"url":"https://github.com/sickdyd/react-search-autocomplete/issues"},"license":"MIT","readme":"![travis](https://travis-ci.com/sickdyd/react-search-autocomplete.svg?branch=master)\n\n## `<ReactSearchAutocomplete>`\n\nA `<ReactSearchAutocomplete>` is a fully customizable search box where the user can type text and filter the results. It relies on [Fuse.js v6.5.3](https://fusejs.io/) for the fuzzy search. Check out their website to see the options (you can pass them to this component).\n\n[Click here to see a demo](https://sickdyd.github.io/react-search-autocomplete/).\n\n[Demo source](https://github.com/sickdyd/react-search-autocomplete/tree/demo).\n\n### Installing\n\n```bash\n$ npm install react-search-autocomplete\nor\n$ yarn add react-search-autocomplete\n```\n\n### Exports\n\nThe default export is `<ReactSearchAutocomplete>`.\nTo use it:\n\n```js\nimport { ReactSearchAutocomplete } from 'react-search-autocomplete'\n```\n\n### React Search Autocomplete Usage\n\n```js\nimport React from 'react'\nimport './App.css'\nimport { ReactSearchAutocomplete } from 'react-search-autocomplete'\n\nfunction App() {\n  const items = [\n    {\n      id: 0,\n      name: 'Cobol'\n    },\n    {\n      id: 1,\n      name: 'JavaScript'\n    },\n    {\n      id: 2,\n      name: 'Basic'\n    },\n    {\n      id: 3,\n      name: 'PHP'\n    },\n    {\n      id: 4,\n      name: 'Java'\n    }\n  ]\n\n  const handleOnSearch = (string, results) => {\n    // onSearch will have as the first callback parameter\n    // the string searched and for the second the results.\n    console.log(string, results)\n  }\n\n  const handleOnHover = (result) => {\n    // the item hovered\n    console.log(result)\n  }\n\n  const handleOnSelect = (item) => {\n    // the item selected\n    console.log(item)\n  }\n\n  const handleOnFocus = () => {\n    console.log('Focused')\n  }\n\n  const formatResult = (item) => {\n    return (\n      <>\n        <span style={{ display: 'block', textAlign: 'left' }}>id: {item.id}</span>\n        <span style={{ display: 'block', textAlign: 'left' }}>name: {item.name}</span>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <div style={{ width: 400 }}>\n          <ReactSearchAutocomplete\n            items={items}\n            onSearch={handleOnSearch}\n            onHover={handleOnHover}\n            onSelect={handleOnSelect}\n            onFocus={handleOnFocus}\n            autoFocus\n            formatResult={formatResult}\n          />\n        </div>\n      </header>\n    </div>\n  )\n}\n\nexport default App\n```\n\n#### With TypeScript\n\n```ts\n  type Item = {\n    id: number;\n    name: string;\n  }\n\n  <ReactSearchAutocomplete<Item> ... />\n```\n\n#### `<ReactSearchAutocomplete>` Props:\n\n```ts\n{\n  items,\n  // The list of items that can be filtered, it can be an array of\n  // any type of object. By default the search will be done on the\n  // property \"name\", to change this behaviour, change the `fuseOptions`\n  // prop. Remember that the component uses the key \"name\" in your\n  // items list to display the result. If your list of items does not\n  // have a \"name\" key, use `resultStringKeyName` to tell what key\n  // (string) to use to display in the results.\n  fuseOptions,\n  // To know more about fuse params, visit https://fusejs.io/\n  //\n  // By default set to:\n  // {\n  //   shouldSort: true,\n  //   threshold: 0.6,\n  //   location: 0,\n  //   distance: 100,\n  //   maxPatternLength: 32,\n  //   minMatchCharLength: 1,\n  //   keys: [\n  //     \"name\",\n  //   ]\n  // }\n  //\n  // `keys` represent the keys in `items` where the search will be\n  // performed.\n  //\n  // Imagine for example that I want to search in `items` by `title`\n  // and `description` in the following items, and display the `title`;\n  // this is how to do it:\n  //\n  //   const items = [\n  //     {\n  //       id: 0,\n  //       title: 'Titanic',\n  //       description: 'A movie about love'\n  //     },\n  //     {\n  //       id: 1,\n  //       title: 'Dead Poets Society',\n  //       description: 'A movie about poetry and the meaning of life'\n  //     }\n  //   ]\n  //\n  // I can pass the fuseOptions prop as follows:\n  //\n  //   <ReactSearchAutocomplete\n  //     items={items}\n  //     fuseOptions={{ keys: [\"title\", \"description\"] }}\n  //     // necessary, otherwise the results will be blank\n  //     resultStringKeyName=\"title\"\n  //   />\n  //\n  resultStringKeyName,\n  // The key in `items` that contains the string to display in the\n  // results\n  inputSearchString,\n  // By changing this prop, you can manually set the search string.\n  inputDebounce,\n  // Default value: 200. When the user is typing, before\n  // calling onSearch wait this amount of ms.\n  onSearch,\n  // The callback function called when the user is searching\n  onHover,\n  // THe callback function called when the user hovers a result\n  onSelect,\n  // The callback function called when the user selects an item\n  // from the filtered list.\n  onFocus,\n  // The callback function called when the user focuses the input.\n  onClear,\n  // The callback called when the user clears the input box by clicking\n  // on the clear icon.\n  showIcon,\n  // Default value: true. If set to false, the icon is hidden.\n  showClear,\n  // Default value: true. If set to false, the clear icon is hidden.\n  maxResults,\n  // Default value: 10. The max number of results to show at once.\n  placeholder,\n  // Default value: \"\". The placeholder of the search box.\n  autoFocus,\n  // Default value: false. If set to true, automatically\n  // set focus on the input.\n  styling,\n  // The styling prop allows you to customize the\n  // look of the searchbox\n  // Default values:\n  // {\n  //   height: \"44px\",\n  //   border: \"1px solid #dfe1e5\",\n  //   borderRadius: \"24px\",\n  //   backgroundColor: \"white\",\n  //   boxShadow: \"rgba(32, 33, 36, 0.28) 0px 1px 6px 0px\",\n  //   hoverBackgroundColor: \"#eee\",\n  //   color: \"#212121\",\n  //   fontSize: \"16px\",\n  //   fontFamily: \"Arial\",\n  //   iconColor: \"grey\",\n  //   lineColor: \"rgb(232, 234, 237)\",\n  //   placeholderColor: \"grey\",\n  //   clearIconMargin: '3px 14px 0 0',\n  //   searchIconMargin: '0 0 0 16px'\n  // };\n  //\n  // For example, if you want to change the background\n  // color you can pass it in the props:\n  // styling={\n  //   {\n  //     backgroundColor: \"black\"\n  //   }\n  // }\n  formatResult,\n  // The callback function used to format how the results are displayed.\n}\n```\n\n### License\n\nMIT\n","readmeFilename":"README.md"}