{"id":19493578,"url":"https://github.com/fwextensions/react-select-quick-score","last_synced_at":"2026-04-20T14:06:07.888Z","repository":{"id":38388364,"uuid":"493467305","full_name":"fwextensions/react-select-quick-score","owner":"fwextensions","description":"Supercharge react-select with QuickScore's smart autocomplete","archived":false,"fork":false,"pushed_at":"2022-07-01T18:27:04.000Z","size":159,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-08T12:09:24.980Z","etag":null,"topics":["autocomplete","react","react-select"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fwextensions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-18T01:29:03.000Z","updated_at":"2023-12-01T08:04:42.000Z","dependencies_parsed_at":"2022-08-25T06:01:38.090Z","dependency_job_id":null,"html_url":"https://github.com/fwextensions/react-select-quick-score","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Freact-select-quick-score","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Freact-select-quick-score/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Freact-select-quick-score/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fwextensions%2Freact-select-quick-score/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fwextensions","download_url":"https://codeload.github.com/fwextensions/react-select-quick-score/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240739101,"owners_count":19849713,"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","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":["autocomplete","react","react-select"],"created_at":"2024-11-10T21:26:38.882Z","updated_at":"2025-11-18T14:35:27.640Z","avatar_url":"https://github.com/fwextensions.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-select` + `quick-score`\n\n\u003e `react-select-quick-score` adds smart autocomplete to [`react-select`](https://react-select.com/home) using [QuickScore](https://github.com/fwextensions/quick-score).\n\nInstead of the limited type-ahead available in `react-select` components, where the user has to type an exact substring to match a menu item, QuickScore lets users type just a few letters to quickly display a list of sensible results, sorted by how well the query matches.  [See a demo](https://fwextensions.github.io/quick-score-demo/)\n\n\u003cimg src=\"https://user-images.githubusercontent.com/61631/172030812-b0b564ed-4c3e-4bc7-9b64-d0f795ae8ff2.png\" alt=\"screenshot\" width=\"719\"\u003e\n\nQuickScore is fast, dependency-free, and is just 2KB when minified and gzipped, so it adds only a little weight to `react-select`.\n\n\n## Install\n\n```sh\nnpm install react-select-quick-score\n```\n\nThe project must also include `react-select` v5 and React v16.8 or later.\n\n\n## Usage\n\nTo create a select element with smart autocomplete, import the `SelectQS` component from the package:\n\n```javascript\nimport React from 'react';\nimport { SelectQS } from 'react-select-quick-score';\n\nconst options = [\n  { value: 'chocolate', label: 'Chocolate' },\n  { value: 'strawberry', label: 'Strawberry' },\n  { value: 'vanilla', label: 'Vanilla' }\n];\n\nconst MyComponent = () =\u003e (\n  \u003cSelectQS options={options} /\u003e\n);\n```\n\n`SelectQS` is a drop-in replacement for [`Select`](https://react-select.com/home#getting-started) from `react-select`, and it supports all of the same [props](https://react-select.com/props).  The difference comes when the user starts typing to find an item in the menu.\n\nUnlike the default `react-select` behavior, the `SelectQS` items are sorted by how well they match the user's query, making it easier to find the desired item.  The query also doesn't have to be an exact substring of an item.  Matches against capital letters and the beginnings of words score higher, so the user could type `gh`, for example, to match items that include `GitHub`.  That query would not match the same items in the `Select` element.\n\nIf the select options are organized into groups, each group is sorted and filtered independently, separated by the group labels.  Groups with no matching items are hidden.\n\n\n## Differences with `react-select`\n\nWhen the query is empty, QuickScore sorts its list of items alphabetically and case-insensitively.  So the options displayed in a `SelectQS` component will be listed alphabetically by default, regardless of their order in the `options` prop.\n\nThe `filterOption` prop is ignored, since QuickScore manages the sorting and filtering of options.\n\nIf the options list includes both grouped and ungrouped items (which is not a typical use case), the ungrouped items will all appear before the first group, regardless of where they appear in the `options` prop.  This is done so the ungrouped options can be filtered and sorted together.  (In the default `Select` component, ungrouped options can appear between or after grouped ones.)\n\n\n## License\n\n[MIT](./LICENSE) © [John Dunning](https://github.com/fwextensions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffwextensions%2Freact-select-quick-score","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffwextensions%2Freact-select-quick-score","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffwextensions%2Freact-select-quick-score/lists"}