{"id":16546217,"url":"https://github.com/contigen/custom-select-component","last_synced_at":"2026-04-19T02:02:45.139Z","repository":{"id":161027522,"uuid":"541118829","full_name":"contigen/custom-select-component","owner":"contigen","description":"custom select component with multiple modes for selections, built in React","archived":false,"fork":false,"pushed_at":"2023-04-08T15:50:32.000Z","size":341,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-26T00:43:41.692Z","etag":null,"topics":["reactjs"],"latest_commit_sha":null,"homepage":"https://custom-select-component.pages.dev/","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/contigen.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}},"created_at":"2022-09-25T09:28:00.000Z","updated_at":"2024-06-08T15:35:08.000Z","dependencies_parsed_at":"2023-05-31T07:45:17.199Z","dependency_job_id":null,"html_url":"https://github.com/contigen/custom-select-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/contigen/custom-select-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contigen%2Fcustom-select-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contigen%2Fcustom-select-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contigen%2Fcustom-select-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contigen%2Fcustom-select-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/contigen","download_url":"https://codeload.github.com/contigen/custom-select-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contigen%2Fcustom-select-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31991720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"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":["reactjs"],"created_at":"2024-10-11T19:09:43.501Z","updated_at":"2026-04-19T02:02:45.124Z","avatar_url":"https://github.com/contigen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom Select Component\n\nThe component features an HTML details element as the main element\n\nhttps://user-images.githubusercontent.com/69436315/192927824-7d8a5c91-37cb-40fc-9ade-ce362352dcb1.mp4\n\nThe Select component has three props: `autoselect` (boolean) `multiple` (boolean) \u0026\u0026 `defaultArr` (required array), typed with React's PropTypes library.\n\nThe autoselect prop when added, activates automatic selections when using the _`tab key` or `ArrowUp \u0026\u0026 ArrowDown`_ to focus; **multiple** prop when added, enables multiple selections or a single selection when omitted. The **defaultArr** prop contains the default options of the Select component.\n\n### Keyboard functionality\n\n`esc` closes the component when open\n\n`PageUp` moves the focus to the first item, while `PageDown` moves the focus to the last item\n\n\n\n\n\n`ArrowUp` \u0026\u0026 `ArrowDown` keys control the focus of the items; the `tab` key does that by default, apparently.\n\n**Gotcha** - using the Arrow keys to move focus once or twice after initial focus of the items has an awkward behaviour.\n\n## Code Structure\n\n`components` folder contains only the select component; this project might be extended to a bigger project for building custom components.\n\n`utils` folder contains simple helper functions used for the component\n\n`hooks` folder contains a custom array hook used in the component\n\n## The Why\n\nSomething like a challenge, after seeing a random video about building a custom select component, I decided to do it, and be creative with it by avoiding unnecessary stuff - using the details HTML element as the main of the project, semantic by default.\n\n## Contributing\n\nIf you think there's a feature that needs to be implemented or anything, open a PR.\n\n## Usage\n\nFeel free to use it, give credits.\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n\nThe page will reload when you make changes.\\\nYou may also see any lint errors in the console.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontigen%2Fcustom-select-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontigen%2Fcustom-select-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontigen%2Fcustom-select-component/lists"}