{"id":16311479,"url":"https://github.com/robertzhidealx/lyte","last_synced_at":"2026-03-02T22:44:56.814Z","repository":{"id":55461878,"uuid":"484628188","full_name":"robertzhidealx/lyte","owner":"robertzhidealx","description":"A collection of highly extensible React components.","archived":false,"fork":false,"pushed_at":"2022-12-27T18:34:04.000Z","size":1353,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T08:51:17.295Z","etag":null,"topics":["dropdown","javascript","multiselect","reactjs","select","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@robertz65/lyte","language":"TypeScript","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/robertzhidealx.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}},"created_at":"2022-04-23T02:43:35.000Z","updated_at":"2023-08-25T11:59:52.000Z","dependencies_parsed_at":"2023-01-31T05:15:50.602Z","dependency_job_id":null,"html_url":"https://github.com/robertzhidealx/lyte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertzhidealx%2Flyte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertzhidealx%2Flyte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertzhidealx%2Flyte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robertzhidealx%2Flyte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robertzhidealx","download_url":"https://codeload.github.com/robertzhidealx/lyte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238174186,"owners_count":19428644,"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","javascript","multiselect","reactjs","select","typescript"],"created_at":"2024-10-10T21:44:30.871Z","updated_at":"2026-03-02T22:44:56.754Z","avatar_url":"https://github.com/robertzhidealx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lyte\n\nA collection of highly extensible React components, including Selectable, a beautiful (multi)select dropdown you've been looking for.\n\n![showcase](https://github.com/robertzhidealx/lyte/blob/main/static/showcase.png)\n\n## Installation\n\n```bash\nnpm install @robertz65/lyte\n```\n\n## Selectable\n\nšŸ”˜ Multiselect \u003cbr /\u003e\nšŸ”­ Full TypeScript support \u003cbr /\u003e\nšŸŒ“ Dark mode (Tailwind CSS) \u003cbr /\u003e\n\n### Import\n\n```js\nimport { Selectable } from \"@robertz65/lyte\";\n```\n\n### Documentation\n\n| Prop | Type | Requirement | Description |\n| --------------- | ---------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `width` | number \\| string | required | The width of the Selectable component. Either a number corresponding to a number of pixels or `\"100%\"` to match the width of its parent. |\n| `options` | {label: string \\| number; content?: ReactNode \\| string}[] | required | The collection of options to select from. |\n| `defaultValue` | string \\| number \\| string[] \\| number[] | required | The label of the value(s) that are selected by default. When `multi` is not specified or set to `false`, `_default ` is a single string or number. Otherwise, it is an array. |\n| `multi` | boolean | optional | Whether Selectable can select multiple options. Defaults to `false`. |\n| `onChange` | (values: {label: string \\| number; content?: ReactNode \\| string}[]) =\u003e void | optional | Tracks changes to the selected options. When `multi` is not specified or set to `false`, `values` is a one-item array with the single selected option. |\n| `allowClear` | boolean | optional | Whether to show clear button to unselect all options. Defaults to `false`. Only works under `multi` mode. |\n| `allowRefill` | boolean | optional | Whether to show refill button to select all options. Defaults to `false`. Only works under `multi` mode. |\n| `className` | string | optional | A list of classes applied to Selectable. |\n| `menuPlacement` | `\"top\"` \\| `\"bottom\"` | optional | Whether the options menu appears above or below Selectable. Defaults to `\"bottom\"`. Only works under single selection mode. |\n\n### Example Usage\n\n```ts\nimport { Selectable } from \"@robertz65/lyte\";\n\nconst SelectableOptions = [\n { label: 1, content: \"Option 1\" },\n { label: 2, content: \"Option 2\" },\n { label: 3, content: \"Option 3\" },\n];\n\nconst DemoComponent = () =\u003e {\n return (\n \u003cSelectable\n width={260}\n multi\n allowClear\n allowRefill\n options={SelectableOptions}\n defaultValue={SelectableOptions.map(({ label }) =\u003e label)}\n onChange={(values) =\u003e console.log(values)}\n /\u003e\n );\n};\n\nexport default DemoComponent;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertzhidealx%2Flyte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobertzhidealx%2Flyte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobertzhidealx%2Flyte/lists"}