{"id":19840646,"url":"https://github.com/joaocnh/react-fuse-picker","last_synced_at":"2025-10-09T17:14:13.294Z","repository":{"id":76103474,"uuid":"106427238","full_name":"JoaoCnh/react-fuse-picker","owner":"JoaoCnh","description":"A React fuzzy-search (fuse.js) picker","archived":false,"fork":false,"pushed_at":"2018-02-21T15:45:28.000Z","size":634,"stargazers_count":11,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-01T19:38:51.003Z","etag":null,"topics":["component","fuse","fusejs","picker","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoaoCnh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-10T14:19:46.000Z","updated_at":"2023-02-05T21:33:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"a4e56c33-3a03-4806-ac50-8a2497a00e3b","html_url":"https://github.com/JoaoCnh/react-fuse-picker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/JoaoCnh/react-fuse-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-fuse-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-fuse-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-fuse-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-fuse-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoaoCnh","download_url":"https://codeload.github.com/JoaoCnh/react-fuse-picker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-fuse-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001886,"owners_count":26083197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","fuse","fusejs","picker","react"],"created_at":"2024-11-12T12:27:38.464Z","updated_at":"2025-10-09T17:14:13.273Z","avatar_url":"https://github.com/JoaoCnh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[build-badge]: https://img.shields.io/travis/JoaoCnh/react-fuse-picker/master.png?style=flat-square\n[build]: https://travis-ci.org/JoaoCnh/react-fuse-picker\n\n[npm-badge]: https://badge.fury.io/js/react-fuse-picker.svg\n[npm]: https://www.npmjs.org/package/react-fuse-picker\n\n[coveralls-badge]: https://coveralls.io/repos/github/JoaoCnh/react-fuse-picker/badge.svg?branch=master\u0026style=flat-square\n[coveralls]: https://coveralls.io/github/JoaoCnh/react-fuse-picker\n\n# react-fuse-picker\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n[![license](http://img.shields.io/npm/l/react-loki.svg)](./LICENSE)\n\n## react-fuse-picker is a ready to use Fuzzy Search (using fuse.js) Picker.\n\n### This component was inspired by [react-fuzzy-picker](https://github.com/1egoman/fuzzy-picker)\n\n### For the fuzzy search part this component uses [Fuse.js](http://fusejs.io/)\n\nIf all you need is a straight out of the box solution for fuzzy search, this is a great choice.\n\n## Installation\n\nAdd react-fuse-picker to your project\n\n```shell\nyarn add react-fuse-picker\n```\n\n**Table of Contents**\n\n- [Usage](#usage)\n- [Demo](#demo)\n- [Importing Styles](#importing-styles)\n- [API](#api)\n    - [`\u003cFusePicker /\u003e`](#fusepicker-)\n        - [FusePicker props](#fusepicker-props)\n            - [`items: array`](#items-array-)\n            - [`maxDisplay: integer`](#maxdisplay-integer-)\n            - [`cycleToTop: boolean`](#cycletotop-boolean-)\n            - [`fuseOptions: object`](#fuseoptions-object-)\n            - [`onChange: function`](#onchange-function-)\n            - [`onClose: function`](#onclose-function-)\n            - [`renderItem: function`](#renderitem-function-)\n            - [`renderInfo: function`](#renderinfo-function-)\n            - [`itemValue: function`](#itemvalue-function-)\n    - [`\u003cFuseBox /\u003e`](#fusebox-)\n        - [FuseBox props](#fusebox-props)\n            - [`isKeyPressed: function`](#iskeypressed-function-)\n            - [`popup: function`](#popup-function-)\n\n## Usage\n\n### Embedded Picker (fixed input)\n\n```js\n\u003cFusePicker\n    isOpen={true}\n    items={yourItems}\n    renderItem={item =\u003e item.title}\n    onChange={item =\u003e alert(`Chose: ${item.title}`)}\n    fuseOptions={yourfuseOptions}\n/\u003e\n```\n\n### Callable Picker (using `ctrl+s` command)\n\n```js\n\u003cFuseBox\n    isKeyPressed={() =\u003e event.keyCode === 83 \u0026\u0026 event.ctrlKey}\n    popup={(isOpen, onClose) =\u003e (\n        \u003cFusePicker\n        isOpen={isOpen}\n        onClose={onClose}\n        renderItem={item =\u003e item.title}\n        onChange={item =\u003e alert(`Chose: ${item.title}`)}\n        items={yourItems}\n        fuseOptions={yourFuseOptions}\n        /\u003e\n    )}\n/\u003e\n```\n\n## Demo\n\nYou can also try out the [demo](https://joaocnh.github.io/react-fuse-picker)\n\n## Importing styles\n```scss\n@import \"node_modules/react-fuse-picker/umd/main.css\";\n```\n\n## API\n\n### `\u003cFusePicker /\u003e`\n\n`\u003cFusePicker /\u003e` is the component that controls the picker behaviour\n\n#### FusePicker props\n\n##### `items: array`\n\nThe items on which the fuzzy search will be applied.\n\n##### `maxDisplay: integer`\n\nThe maximum number of results displayed by the picker.\n\n##### `cycleToTop: boolean`\n\nIf `true` when the user goes to the last result and navigates further down, it goes back to the first result.\n\n##### `fuseOptions: object`\n\nThe object containing all Fuse.js configuration. For more info visit [Fuse.js](http://fusejs.io/)\n\n##### `onChange: function`\n\nCallback for when the user selects an option. It receives the `item` as param.\n\n##### `onClose: function`\n\nCallback for when the user closes the picker.\n\n##### `renderItem: function`\n\nFunction that will render each single result item.\n\n##### `renderInfo: function`\n\nFunction that will render the info/instructions of the picker on top of the input.\nCreate your own and return `null` if you don't want any info.\n\n##### `itemValue: function`\n\nFunction that allows you to customize the return value of the picker. By default it returns the whole item (object) but you can customize it if you so desire.\n\n### `\u003cFuseBox /\u003e`\n\n`\u003cFuseBox /\u003e` is the component that will wrap a `\u003cFusePicker /\u003e` in order to show it on command press.\n\n#### FuseBox props\n\n##### `isKeyPress: function`\n\nFunction that will check if the right command was pressed in order to show the picker.\n\nYou can define any kind of combination of key events you want.\n\n##### `popup: function`\n\nFunction in which you must render out your `\u003cFusePicker /\u003e`. Check the demo above to see how!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaocnh%2Freact-fuse-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoaocnh%2Freact-fuse-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaocnh%2Freact-fuse-picker/lists"}