{"id":14957142,"url":"https://github.com/benbowes/react-responsive-select","last_synced_at":"2025-05-16T12:03:25.821Z","repository":{"id":18869189,"uuid":"81442249","full_name":"benbowes/react-responsive-select","owner":"benbowes","description":"A customisable, touchable, React select / multi-select form control. Built with keyboard and screen reader accessibility in mind","archived":false,"fork":false,"pushed_at":"2025-04-17T11:46:21.000Z","size":21278,"stargazers_count":109,"open_issues_count":6,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T01:29:36.213Z","etag":null,"topics":["accessible","dropdown","react","responsive","select","touch"],"latest_commit_sha":null,"homepage":"https://benbowes.github.io/react-responsive-select/","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/benbowes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-02-09T11:13:53.000Z","updated_at":"2025-04-17T11:46:24.000Z","dependencies_parsed_at":"2024-06-18T15:32:21.606Z","dependency_job_id":"d960157d-281c-4a69-b085-fe9f295d5fd0","html_url":"https://github.com/benbowes/react-responsive-select","commit_stats":{"total_commits":534,"total_committers":11,"mean_commits":48.54545454545455,"dds":0.4550561797752809,"last_synced_commit":"c9db1b9c4acce562ba94c0b1c37327c864e199aa"},"previous_names":[],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Freact-responsive-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Freact-responsive-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Freact-responsive-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benbowes%2Freact-responsive-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benbowes","download_url":"https://codeload.github.com/benbowes/react-responsive-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527084,"owners_count":22085918,"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":["accessible","dropdown","react","responsive","select","touch"],"created_at":"2024-09-24T13:14:13.487Z","updated_at":"2025-05-16T12:03:25.760Z","avatar_url":"https://github.com/benbowes.png","language":"TypeScript","readme":"# react-responsive-select\n\nA customisable, touchable, React single-select / multi-select form control.\n\nBuilt with keyboard and screen reader accessibility in mind.\n\n## Features\n\n- Single and Multi select modes\n- Accessible WAI ARIA compliance\n- Touch friendly\n- Keyboard friendly\n- Similar interaction experience across platforms\n- Custom label rendering\n- Custom option markup\n- Option headers\n- Mimics keyboard functionality where possible (sans multiselect)\n- Easy slot-in to your design system\n- It's about 25kb\n\n## Recommendation\n\n\u003e This select component was created many years ago when there was no React WCAG select available. Now there are plenty. I suggest using one of those, their communities and contributer lists are larger.\n\u003e I will continue to run patches on this one in the foreseeable future for security upgrades if any issues arise.\n\n## Getting started\n\nInstall the dependency - https://www.npmjs.com/package/react-responsive-select\n\n`npm install react-responsive-select --save-dev`\n\nExample usage (Single Select):\n\n```jsx\nimport React from 'react';\nimport { Select, CaretIcon, ModalCloseButton } from 'react-responsive-select';\n\n// for default styles...\nimport 'react-responsive-select/dist/react-responsive-select.css';\n\nconst Form = () =\u003e (\n  \u003cform\u003e\n    \u003cSelect\n      name=\"carType1\"\n      modalCloseButton={\u003cModalCloseButton /\u003e}\n      options={[\n        { value: 'null', text: 'Any' },\n        { value: 'alfa-romeo', text: 'Alfa Romeo' },\n        { value: 'bmw', text: 'BMW' },\n        { value: 'fiat', text: 'Fiat' },\n        { value: 'subaru', text: 'Subaru' },\n        { value: 'suzuki', text: 'Suzuki' },\n        { value: 'tesla', text: 'Tesla' },\n        { value: 'volvo', text: 'Volvo' },\n        { value: 'zonda', text: 'Zonda' },\n      ]}\n      caretIcon={\u003cCaretIcon /\u003e}\n      prefix=\"Car1: \"\n      selectedValue=\"subaru\"\n      onChange={newValue =\u003e console.log('onChange', newValue)}\n      onSubmit={() =\u003e console.log('onSubmit')}\n    /\u003e\n  \u003c/form\u003e\n);\n```\n\nExample usage (Multi Select):\n\n```jsx\nimport React from 'react';\nimport { Select, CaretIcon, MultiSelectOptionMarkup, ModalCloseButton } from 'react-responsive-select';\n\n// for default styles...\nimport 'react-responsive-select/dist/react-responsive-select.css';\n\nconst Form = () =\u003e (\n  \u003cform\u003e\n    \u003cSelect\n      multiselect={true}\n      name=\"make6\"\n      selectedValues={['fiat']}\n      modalCloseButton={\u003cModalCloseButton /\u003e}\n      options={[\n        {\n          value: 'any',\n          text: 'Any',\n          markup: \u003cMultiSelectOptionMarkup text=\"Any\" /\u003e,\n        },\n        {\n          value: 'fiat',\n          text: 'Fiat',\n          markup: \u003cMultiSelectOptionMarkup text=\"Fiat\" /\u003e,\n        },\n        {\n          value: 'subaru',\n          text: 'Subaru',\n          markup: \u003cMultiSelectOptionMarkup text=\"Subaru\" /\u003e,\n        },\n        {\n          value: 'suzuki',\n          text: 'Suzuki',\n          markup: \u003cMultiSelectOptionMarkup text=\"Suzuki\" /\u003e,\n        },\n      ]}\n      caretIcon={\u003cCaretIcon /\u003e}\n      onChange={(...rest) =\u003e console.log(rest)}\n      onSubmit={() =\u003e console.log('onSubmit')}\n    /\u003e\n  \u003c/form\u003e\n);\n```\n\n## Examples \u0026 Demo\n\nhttps://benbowes.github.io/react-responsive-select/\n\n## API\n\nhttps://benbowes.github.io/react-responsive-select/#/API\n\n## Screen Reader Demo\n\nhttps://benbowes.github.io/react-responsive-select/#/Screen%20reader%20demo\n\n## Business Rules\n\nHave a read of [README_BUSINESS_RULES.md](./README_BUSINESS_RULES.md)\n\n## Upgrade from v6 - v7\n\nFrom version 7.0.0 on, you will need to use a `key` prop to update react-responsive-select's internal state. More on that here: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key\n\nThere are some examples in the recipe section here: https://benbowes.github.io/react-responsive-select/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenbowes%2Freact-responsive-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenbowes%2Freact-responsive-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenbowes%2Freact-responsive-select/lists"}