{"id":20804409,"url":"https://github.com/sequencemedia/react-select-element","last_synced_at":"2026-02-25T12:42:27.777Z","repository":{"id":34905102,"uuid":"59961040","full_name":"sequencemedia/react-select-element","owner":"sequencemedia","description":"React Select Element","archived":false,"fork":false,"pushed_at":"2025-10-18T13:19:29.000Z","size":12150,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T01:47:36.618Z","etag":null,"topics":["component","element","react","select"],"latest_commit_sha":null,"homepage":"https://github.com/sequencemedia/react-select-element","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/sequencemedia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-05-29T19:51:45.000Z","updated_at":"2025-10-18T13:19:30.000Z","dependencies_parsed_at":"2023-12-24T06:34:21.456Z","dependency_job_id":"1bd158ea-87c2-4d52-aea6-ac1a6b70dec4","html_url":"https://github.com/sequencemedia/react-select-element","commit_stats":{"total_commits":941,"total_committers":5,"mean_commits":188.2,"dds":0.06163655685441016,"last_synced_commit":"006b63d26fb5bd3e315c2b4af58e118359d4f4cc"},"previous_names":["sequencemedia/react.select.element"],"tags_count":409,"template":false,"template_full_name":null,"purl":"pkg:github/sequencemedia/react-select-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-select-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-select-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-select-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-select-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sequencemedia","download_url":"https://codeload.github.com/sequencemedia/react-select-element/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sequencemedia%2Freact-select-element/sbom","scorecard":{"id":811782,"data":{"date":"2025-08-11","repo":{"name":"github.com/sequencemedia/react-select-element","commit":"058f2a4adbe198b3ec6a5d61ec52cfed566f1ff3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T13:22:11.152Z","repository_id":34905102,"created_at":"2025-08-23T13:22:11.152Z","updated_at":"2025-08-23T13:22:11.152Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280540825,"owners_count":26347764,"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-22T02:00:06.515Z","response_time":63,"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","element","react","select"],"created_at":"2024-11-17T19:09:15.752Z","updated_at":"2025-10-23T19:38:30.539Z","avatar_url":"https://github.com/sequencemedia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-select-element\n\n## React Select Element\n\n`react-select-element` implements standard `HTML` `\u003cselect /\u003e` behaviour, without using any `\u003cform /\u003e` elements. (It can, of course, be composed into other components which implement them.)\n\nYou can use it as-is, in which case, there is a _Class_ component (using `setState`) or a _Hooks_ function component (using _Hooks'_ `useState`). In the former case, you can `extend` your own components from it, modifying its behaviour to suit your needs.\n\nThere are Storybooks!\n\n```bash\nnpm run storybook\n```\n\n[Or, an example implementation is available on GitHub.](https://github.com/sequencemedia/react-select-element-io)\n\nWhile the component appends some `className` attributes to its elements, the package does not contain any `CSS` stylesheets. The example implementation contains [a simple stylesheet](https://github.com/sequencemedia/react-select-element-io/blob/master/public/assets/css/react-select-element.css) which can help you start your own.\n\n### Using ES\n\nThe _Class_ component is the default export.\n\n```javascript\nimport Select from 'react-select-element'\n```\n\nYou can explicitly import the _Class_ component:\n\n```javascript\nimport Select from 'react-select-element/class'\n```\n\nOr explicitly import the _Hooks_ function component:\n\n```javascript\nimport Select from 'react-select-element/hooks'\n```\n\n### Using JS\n\nThe _Class_ component is the default export.\n\n```javascript\nconst Select = require('react-select-element')\n```\n\nTo explicitly import the _Class_ component:\n\n```javascript\nconst Select = require('react-select-element/class')\n```\n\nTo explicitly import the _Hooks_ component:\n\n```javascript\nconst Select = require('react-select-element/hooks')\n```\n\n### Implementing in React\n\nEither:\n\n```jsx\n  \u003cSelect\n    index={this.state.index}\n    onChange={(index) =\u003e {\n      this.setState({ index })\n    }}\n    tabIndex={0}\n    accessKey='S'\n    options={[\n      { text: 'Letter A' },\n      { text: 'Letter B' },\n      { text: 'Letter C' },\n      { text: 'Letter D' },\n      { text: 'Letter E' }\n    ]}\n  /\u003e\n```\n\nOr:\n\n```jsx\n  \u003cSelect\n    defaultIndex={0}\n    tabIndex={0}\n    accessKey='S'\n    options={[\n      { text: 'Letter A' },\n      { text: 'Letter B' },\n      { text: 'Letter C' },\n      { text: 'Letter D' },\n      { text: 'Letter E' }\n    ]}\n  /\u003e\n```\n\nOtherwise:\n\n```jsx\n  \u003cSelect\n    disabled\n  /\u003e\n```\n\nFinally:\n\n```jsx\n  \u003cSelect\n    readOnly\n  /\u003e\n```\n\n### Extending the component\n\n#### 1. `\u003cInfiniteSelect /\u003e`\n\nIn standard behaviour, when the options are visible, the user can move up and down through the options list by pressing the \"arrow up\" and \"arrow down\" keys on their keyboard. Movement will stop at the first item or the last item.\n\nYou want to modify that behaviour.\n\nBy pressing the \"arrow up\" key, the user should move through each item to the _first item_ in the list; then, by pressing again, they should move to the _last item_.\n\nSimilarly, by pressing the \"arrow down\" key, the user should move through each item to the _last item_ in the list; then, pressing again, they should move to the _first item_.\n\nTo achieve this, you can `extend` the component and override two of its methods.\n\n```javascript\nclass InfiniteSelect extends Select {\n  incrementActiveIndex () {\n    const {\n      activeIndex\n    } = this.state\n    const incremented = activeIndex + 1\n\n    this.activeIndex(\n      (incremented \u003e this.upperBound) ? this.lowerBound : incremented\n    )\n  }\n\n  decrementActiveIndex () {\n    const {\n      activeIndex\n    } = this.state\n    const decremented = activeIndex - 1\n\n    this.activeIndex(\n      (decremented \u003c this.lowerBound) ? this.upperBound : decremented\n    )\n  }\n}\n```\n\nThere are Storybooks!\n\n```bash\nnpm run storybook\n```\n\n[Or, an example implementation is available on GitHub.](https://github.com/sequencemedia/react-select-element-io) Clone that repository, install and start the package, then look for the example titled `Infinite Select Component`.\n\n#### 2. `\u003cSelectSelect /\u003e`\n\nIn standard behaviour, controlling components are only notified of a change to the selected `index` on `click` or keyboard `enter` events.\n\nYou want to modify that behaviour.\n\nYou want controlling components to be notified of a change whenever the the \"arrow up\" or \"arrow down\" keys are pressed. (In effect, each option is selected when the user moves through the list.)\n\nTo achieve this, you can extend the component and modify the same two methods as before.\n\n```javascript\nclass SelectSelect extends Select {\n  incrementActiveIndex () {\n    super.incrementActiveIndex()\n\n    const {\n      activeIndex\n    } = this.state\n\n    this.selectIndex(\n      Math.min(activeIndex + 1, this.upperBound)\n    )\n  }\n\n  decrementActiveIndex () {\n    super.decrementActiveIndex()\n\n    const {\n      activeIndex\n    } = this.state\n\n    this.selectIndex(\n      Math.max(activeIndex - 1, this.lowerBound)\n    )\n  }\n}\n```\n\nInvoking `super.incrementActiveIndex()` or `super.decrementActiveIndex()` in the overriding method ensures that existing behaviour remains unchanged, while the additional statements modify the behaviour of the component.\n\nThere are Storybooks!\n\n```bash\nnpm run storybook\n```\n\n[Or, an example implementation is available on GitHub.](https://github.com/sequencemedia/react-select-element-io) Clone that repository, install and start the package, then look for the example titled `Select Select Component`.\n\n#### 3. `\u003cHiddenSelect /\u003e`\n\n`react-select-element` does not use any `\u003cform /\u003e` elements.\n\nYou want to compose it into a `\u003cform /\u003e`.\n\nIn this case, you've chosen to compose the `\u003cSelect /\u003e` into a controlling component which renders the `text` of the selected option into the `value` attribute of an `\u003cinput type='hidden' /\u003e` element.\n\n```jsx\nfunction DEFAULT_HANDLE_CHANGE () {\n  //\n}\n\nclass HiddenSelect extends Component {\n  state = {}\n\n  handleIndexChange = (index) =\u003e {\n    const {\n      options = [],\n      onChange = DEFAULT_HANDLE_CHANGE\n    } = this.props\n    const {\n      text\n    } = options[index]\n\n    this.setState({ value: text })\n    onChange(index)\n  }\n\n  render () {\n    const {\n      value\n    } = this.state\n\n    return (\n      \u003cdiv className='hidden-select'\u003e\n        \u003cSelect\n          {...this.props}\n          onChange={this.handleIndexChange}\n        /\u003e\n        \u003cinput name='hidden-select' type='hidden' value={value} /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nHiddenSelect.propTypes = {\n  ...Select.propTypes\n}\n```\n\nThere are Storybooks!\n\n```bash\nnpm run storybook\n```\n\n[Or, an example implementation is available on GitHub.](https://github.com/sequencemedia/react-select-element-io) Clone that repository, install and start the package, then look for the example titled `Hidden Select Component`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Freact-select-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsequencemedia%2Freact-select-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsequencemedia%2Freact-select-element/lists"}