{"id":20447633,"url":"https://github.com/acrool/acrool-react-dropdown","last_synced_at":"2025-04-13T01:10:45.016Z","repository":{"id":53027401,"uuid":"521186936","full_name":"acrool/acrool-react-dropdown","owner":"acrool","description":"Drop-down menu with rich functions, including search/groups options/avatar/multi for Reactjs","archived":false,"fork":false,"pushed_at":"2024-10-29T14:40:29.000Z","size":5191,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T04:34:36.747Z","etag":null,"topics":["dropdown","react","select","select-avatar","select2","typescript","vite4"],"latest_commit_sha":null,"homepage":"https://acrool-react-dropdown.pages.dev/","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/acrool.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-04T08:34:26.000Z","updated_at":"2024-10-29T14:40:49.000Z","dependencies_parsed_at":"2024-09-09T16:57:14.348Z","dependency_job_id":"c9946f24-84ef-48f0-8aa9-075a581e72bc","html_url":"https://github.com/acrool/acrool-react-dropdown","commit_stats":{"total_commits":302,"total_committers":1,"mean_commits":302.0,"dds":0.0,"last_synced_commit":"6152e55ebb05f535525b4b408cc5436230cc685b"},"previous_names":["imagine10255/bear-react-dropdown"],"tags_count":117,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acrool%2Facrool-react-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acrool","download_url":"https://codeload.github.com/acrool/acrool-react-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647259,"owners_count":21139081,"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":["dropdown","react","select","select-avatar","select2","typescript","vite4"],"created_at":"2024-11-15T10:28:05.160Z","updated_at":"2025-04-13T01:10:44.993Z","avatar_url":"https://github.com/acrool.png","language":"TypeScript","funding_links":[],"categories":["React component"],"sub_categories":[],"readme":"# Acrool React Dropdown\n\n\u003ca href=\"https://acrool-react-dropdown.pages.dev/\" title=\"Acrool React Dropdown - Dropdown list with React Component\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/acrool/acrool-react-dropdown/main/example/public/og.webp\" alt=\"Acrool React Dropdown Logo\"/\u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n    Drop-down menu with rich functions, including search/groups options/avatar/multi for Reactjs\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/@acrool/react-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-dropdown)\n[![npm](https://img.shields.io/bundlejs/size/@acrool/react-dropdown?style=for-the-badge)](https://github.com/acrool/@acrool/react-dropdown/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/l/@acrool/react-dropdown?style=for-the-badge)](https://github.com/acrool/react-dropdown/blob/main/LICENSE)\n\n[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-dropdown)\n[![npm](https://img.shields.io/npm/dt/@acrool/react-dropdown.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-dropdown)\n\n\u003c/div\u003e\n\n## Features\n\n- Supports two themes (light/dark)\n- Support multiple selection function\n- Support groups options\n- Support avatar display\n- Support search search function\n- Support value custom type (string, number, boolean, object...)\n- Support accessibility (keyboard Tab, Arrow Top, Bottom, Enter)\n\n## Install\n\n```bash\nyarn add @acrool/react-dropdown\n```\n\n## Usage\n\nadd in your index.tsx\n```tst\nimport \"@acrool/react-dropdown/dist/index.css\";\n```\n\nthen in your page\n```tsx\nimport {Dropdown, DropdownMulti} from '@acrool/react-dropdown';\n\n\nconst Example = () =\u003e {\n    const [value, setValue] = useState\u003cstring|null\u003e('');\n    const [multiValue, setMultiValue] = useState\u003cArray\u003cstring|null\u003e|null\u003e(null);\n\n    const renderDropdown = () =\u003e {\n        const options = [\n            {text: 'Jack Wu', value: '1'},\n            {text: 'Imagine Chiu', value: '2'},\n            {text: 'Jason Dinwiddie', value: '3'},\n            {text: 'Gloria Lu', value: '4'},\n        ];\n        return \u003cDropdown value={value} onChange={setValue} options={options}/\u003e;\n    }\n    \n    const renderDropdownMulti = () =\u003e {\n        const options = [\n            {text: 'Select option item...', value: '', avatarUrl: ''},\n            {text: 'Jack Wu', value: '1', avatarUrl: asset('/images/avatar/female-1.jpg')},\n            {text: 'Imagine Chiu', value: '2', avatarUrl: asset('/images/avatar/female-2.jpg')},\n            {text: 'Jason Dinwiddie', value: '3', avatarUrl: asset('/images/avatar/female-3.jpg')},\n            {text: 'Gloria Lu', value: '4', avatarUrl: asset('/images/avatar/female-4.jpg')},\n        ];\n        return \u003cDropdownMulti value={multiValue} onChange={setMultiValue} options={options2} isDark/\u003e;\n    }\n    \n    return (\n        \u003c\u003e\n            {renderDropdown()}\n            {renderDropdownMulti()}\n        \u003c/\u003e\n    );\n\n};\n```\n\n\u003cimg src=\"https://acrool-react-dropdown.pages.dev/preview.webp\" alt=\"Acrool React Dropdown Preview\" width=\"700\"/\u003e\n\n\n\n## Options\n\nif need use `null` value, options type\n\n```json\n{\n    \"compilerOptions\": {\n        \"strictNullChecks\": false\n    }\n}\n```\n\nThere is also a example that you can play with it:\n\n[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-dropdown/main/play-in-example-button.svg)](https://acrool-react-dropdown.pages.dev)\n\n\n## License\n\nMIT © [Acrool](https://github.com/acrool) \u0026 [Imagine](https://github.com/imagine10255)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facrool%2Facrool-react-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facrool%2Facrool-react-dropdown/lists"}