{"id":26670452,"url":"https://github.com/justnixx/react-simple-select","last_synced_at":"2025-03-25T22:23:54.090Z","repository":{"id":284230224,"uuid":"954174669","full_name":"justnixx/react-simple-select","owner":"justnixx","description":"A simple, customizable, accessible select dropdown for React.","archived":false,"fork":false,"pushed_at":"2025-03-24T20:10:36.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T21:21:56.318Z","etag":null,"topics":["accessible","custom-select","dropdown","react","select","ui-component"],"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/justnixx.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-24T17:12:52.000Z","updated_at":"2025-03-24T20:13:13.000Z","dependencies_parsed_at":"2025-03-24T21:22:01.838Z","dependency_job_id":"a96c7a2d-8763-4f52-abe5-bc27c782e52d","html_url":"https://github.com/justnixx/react-simple-select","commit_stats":null,"previous_names":["justnixx/react-simple-select"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justnixx%2Freact-simple-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justnixx%2Freact-simple-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justnixx%2Freact-simple-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justnixx%2Freact-simple-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justnixx","download_url":"https://codeload.github.com/justnixx/react-simple-select/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245551685,"owners_count":20634064,"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","custom-select","dropdown","react","select","ui-component"],"created_at":"2025-03-25T22:23:53.651Z","updated_at":"2025-03-25T22:23:54.080Z","avatar_url":"https://github.com/justnixx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simple Select\n\nA lightweight, customizable, and accessible React select component with support for multi-select, async options, and keyboard navigation.\n\n## Features\n\n- ✅ Supports both **single** and **multi-select**\n- ✅ **Async options** support (fetch data dynamically)\n- ✅ Keyboard navigation (**Arrow keys, Enter, Escape**)\n- ✅ **Custom icons** for options\n- ✅ **Fully customizable styles** (default SCSS provided)\n- ✅ **Click outside to close**\n\n## Installation\n\n```sh\nyarn add @nixxy/react-simple-select\n```\n\nor\n\n```sh\nnpm install @nixxy/react-simple-select\n```\n\n## Usage\n\n```tsx\nimport SimpleSelect, { Option } from '@nixxy/react-simple-select';\nimport '@nixxy/react-simple-select/dist/style.css';\n\nconst options: Option[] = [\n  { label: 'Apple', value: 'apple' },\n  { label: 'Banana', value: 'banana' },\n  { label: 'Cherry', value: 'cherry' },\n];\n\nexport default function Example() {\n  return (\n    \u003cSimpleSelect options={options} onChange={(value) =\u003e console.log(value)} /\u003e\n  );\n}\n```\n\n### Multi-Select Example\n\n```tsx\n\u003cSimpleSelect\n  options={options}\n  multiple\n  onChange={(values) =\u003e console.log(values)}\n/\u003e\n```\n\n### Async Options Example\n\n```tsx\nconst fetchOptions = async () =\u003e {\n  return new Promise\u003cOption[]\u003e((resolve) =\u003e\n    setTimeout(() =\u003e {\n      resolve([\n        { label: 'React', value: 'react' },\n        { label: 'Vue', value: 'vue' },\n      ]);\n    }, 10000)\n  );\n};\n\n\u003cSimpleSelect options={fetchOptions} /\u003e;\n```\n\n## Props\n\n| Prop          | Type                                     | Default       | Description                                 |\n| ------------- | ---------------------------------------- | ------------- | ------------------------------------------- |\n| `options`     | `Option[]` or `() =\u003e Promise\u003cOption[]\u003e`  | `[]`          | The list of options (static or async)       |\n| `multiple`    | `boolean`                                | `false`       | Enables multi-select mode                   |\n| `onChange`    | `(selected: Option or Option[]) =\u003e void` | `undefined`   | Callback triggered when selection changes   |\n| `placeholder` | `string`                                 | `\"Select...\"` | Placeholder text when no option is selected |\n| `className`   | `string`                                 | `\"\"`          | Additional class names for styling          |\n\n## Keyboard Navigation\n\n- **Arrow Down**: Move to the next option\n- **Arrow Up**: Move to the previous option\n- **Enter**: Select the focused option\n- **Escape**: Close the dropdown\n\n## Custom Styling\n\nYou can customize the component using the `className` prop:\n\n```tsx\nimport { FiCoffee } from 'react-icons/fi';\n\n\u003cSimpleSelect\n  className=\"custom-select\"\n  options={[{ value: 'coffee', label: 'Coffee', Icon: \u003cFiCoffee /\u003e }]}\n/\u003e;\n```\n\n### **Overriding Styles**\n\nIf you want full control over the styles, you can **skip importing** the default CSS and write your own:\n\n```css\n/* Base styles */\n.nx-simple-select {\n  /* Custom styles */\n}\n\n.nx-simple-select .options {\n  /* Custom dropdown styles */\n}\n\n/* Hide dropdown icon */\n.nx-simple-select .select-icon {\n  display: none;\n}\n\n/* Add a background image to .nx-simple-select */\n.nx-simple-select {\n  background-image: url('your-image.png');\n}\n```\n\nThe default styles are primarily for testing, so you’re free to customize them however you like.\n\n---\n\n## License\n\nMIT\n\n## Contributing\n\nFeedback and contributions are welcome! Open an issue or submit a PR.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustnixx%2Freact-simple-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustnixx%2Freact-simple-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustnixx%2Freact-simple-select/lists"}