{"id":20098294,"url":"https://github.com/zemd/react-slottable","last_synced_at":"2025-04-14T11:40:35.948Z","repository":{"id":224391343,"uuid":"763101774","full_name":"zemd/react-slottable","owner":"zemd","description":"A lightweight concept to customize subcomponents in React","archived":false,"fork":false,"pushed_at":"2025-04-05T12:09:36.000Z","size":921,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T13:22:18.326Z","etag":null,"topics":["component-architecture","react","react-components","slots"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zemd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"zemd"}},"created_at":"2024-02-25T15:08:53.000Z","updated_at":"2025-04-05T12:09:38.000Z","dependencies_parsed_at":"2024-02-25T18:28:31.136Z","dependency_job_id":"547c5bee-d2e2-4593-ba34-ab737f960be5","html_url":"https://github.com/zemd/react-slottable","commit_stats":null,"previous_names":["zemd/react-slottable"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zemd%2Freact-slottable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zemd%2Freact-slottable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zemd%2Freact-slottable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zemd%2Freact-slottable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zemd","download_url":"https://codeload.github.com/zemd/react-slottable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248874211,"owners_count":21175791,"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":["component-architecture","react","react-components","slots"],"created_at":"2024-11-13T17:02:40.892Z","updated_at":"2025-04-14T11:40:35.848Z","avatar_url":"https://github.com/zemd.png","language":"TypeScript","funding_links":["https://github.com/sponsors/zemd"],"categories":[],"sub_categories":[],"readme":"# React Slottable for customizable components\n\n\u003e A lightweight concept to customize subcomponents in React\n\n[![](https://img.shields.io/npm/v/@zemd/react-slottable?color=%230000ff\u0026labelColor=%23000)](https://www.npmjs.com/package/@zemd/react-slottable)\n\nThe package provides a lightweight approach to give your component users ability to customize it's subcomponents easily. The idea is highly inspired by [Material-UI](https://mui.com/x/common-concepts/custom-components/).\n\n## Usage\n\n## Installation\n\n```bash\nnpm install --save-dev @zemd/react-slottable\npnpm add -D @zemd/react-slottable\n```\n\n## Writing components\n\nThe core concept of the library is **slot**. A **slot** is a part of a component that can be overridden and/or customized. For example, you want to create a `Calendar`, but you do not want to create a numerous amount of props to customize nested components. Instead, you can divide your components on **slots** and provide your users with the ability to customize them.\n\nLet's create a simple `Button` component with `startDecorator` and `endDecorator` slots to show how it works:\n\n```tsx\nimport { type PropsWithSlots, useSlot } from \"@zemd/react-slottable\";\n\ntype ButtonProps = PropsWithSlots\u003c\n  React.PropsWithChildren\u003c{\n    // here you define your regular component props\n    fullWidth?: boolean;\n    disabled?: boolean;\n    size?: \"sm\" | \"md\" | \"xl\";\n    variant?: \"solid\" | \"outlined\";\n    color?: \"primary\" | \"secondary\";\n    className?: string;\n  }\u003e,\n  [\"startDecorator\", \"endDecorator\"] // here you define your slots\n\u003e;\n\nconst DefaultDecorator: React.FC\u003c{ className?: string }\u003e = ({ className }) =\u003e {\n  return \u003cdiv className={className}\u003eDefault decorator\u003c/div\u003e;\n};\n\nexport const Button: React.FC\u003cButtonProps\u003e = (rootProps) =\u003e {\n  const { slots, slotProps, ...props } = rootProps;\n  const StartDecoratorSlot = useSlot(\"startDecorator\", rootProps, {\n    slot: DefaultDecorator, // provide default decorator, but can be overridden by user\n  });\n  const EndDecoratorSlot = useSlot(\"startDecorator\", rootProps);\n\n  return (\n    \u003cbutton {...props}\u003e\n      {/* ^^^ do not forget to handle not standard attributes, e.g. fullWidth ...*/}\n      \u003cStartDecoratorSlot className=\"class-override\" /\u003e\n      {/* ^^^ you can provide default className ^^^ */}\n      {props.children}\n      \u003cEndDecoratorSlot /\u003e\n    \u003c/button\u003e\n  );\n};\n```\n\nNow your users can use this `Button`:\n\n```tsx\nconst MyCustomLabelComponent: React.FC = () =\u003e {\n  return \u003cspan\u003eMy custom label\u003c/span\u003e;\n};\n\nexport function HomePage(): React.JSX.Element {\n  return (\n    \u003cdiv\u003e\n      \u003cButton\n        slots={{\n          endDecorator: MyCustomLabelComponent,\n        }}\n        slotProps={{\n          startDecorator: {\n            prop1: \"value\",\n          },\n        }}\n        className=\"my-custom-button-className\"\n      \u003e\n        Click me!\n      \u003c/Button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nAs you can see, `StartDecoratorSlot` was predefined with default component, which will be always shown until user overrides it. However, the `EndDecoratorSlot` was not predefined, so it will be empty until user provides a component for it.\n\n## License\n\nThe `@zemd/react-slottable` is licensed under **[Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0)** 😇.\n\n## 💙 💛 Donate\n\n[![](https://img.shields.io/static/v1?color=blue\u0026label=UNITED24\u0026message=support+Ukraine)](https://u24.gov.ua/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzemd%2Freact-slottable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzemd%2Freact-slottable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzemd%2Freact-slottable/lists"}