{"id":16703516,"url":"https://github.com/kolengri/react-slot-component","last_synced_at":"2025-06-11T03:13:32.155Z","repository":{"id":42920952,"uuid":"355886587","full_name":"kolengri/react-slot-component","owner":"kolengri","description":"🧇 Make your react components sweet again! Type safe Vue like slots for react","archived":false,"fork":false,"pushed_at":"2022-11-02T11:51:53.000Z","size":1133,"stargazers_count":13,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T21:50:36.990Z","etag":null,"topics":["components","helper","layouts","react","rendering","slots","templates","typescript"],"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/kolengri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-08T11:51:13.000Z","updated_at":"2025-03-04T05:45:30.000Z","dependencies_parsed_at":"2022-09-14T09:20:31.848Z","dependency_job_id":null,"html_url":"https://github.com/kolengri/react-slot-component","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolengri%2Freact-slot-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolengri%2Freact-slot-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolengri%2Freact-slot-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolengri%2Freact-slot-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kolengri","download_url":"https://codeload.github.com/kolengri/react-slot-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245116013,"owners_count":20563265,"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":["components","helper","layouts","react","rendering","slots","templates","typescript"],"created_at":"2024-10-12T19:08:34.668Z","updated_at":"2025-03-23T14:31:48.306Z","avatar_url":"https://github.com/kolengri.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-slot-component\n\n## Vue inspired slot like high order component for React\n\n[![NPM](https://img.shields.io/npm/v/react-slot-component.svg)](https://www.npmjs.com/package/react-slot-component)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Badges](https://badgen.net/npm/license/react-slot-component)](https://www.npmjs.com/package/react-slot-component)\n[![Badges](https://badgen.net/npm/dependents/react-slot-component)](https://www.npmjs.com/package/react-slot-component)\n[![Badges](https://badgen.net/npm/types/react-slot-component)](https://www.npmjs.com/package/react-slot-component)\n[![Badges](https://badgen.net/github/issues/kolengri/react-slot-component)](https://www.npmjs.com/package/react-slot-component)\n[![Badges](https://badgen.net/bundlephobia/min/react-slot-component)](https://bundlephobia.com/result?p=react-slot-component)\n[![Badges](https://badgen.net/bundlephobia/minzip/react-slot-component)](https://bundlephobia.com/result?p=react-slot-component)\n\n## Install\n\n```bash\nnpm install --save react-slot-component\n```\n\n```bash\nyarn add react-slot-component\n```\n\n## Usage\n\nThe aim of this package is to end up with annoying practice of passing the subcomponents to the layouts using properties. The package allows you to create and use layouts with replaceable default slots with pure JSX/TSX syntax.\n\n### Prepare your Layout\n\n```tsx\n// SlotExampleComponent.tsx\n\nimport * as React from 'react';\nimport { withSlots } from 'react-slot-component';\n\nexport type SlotExampleComponentProps = {};\n\n// Describe you future slots name with props\n\nexport type SlotExampleComponentSlots = {\n  SlotOne: {\n    children: React.ReactNode;\n    slotOneProp1: string;\n    slotOneProp2: string;\n  };\n  SlotTwo: {\n    children: React.ReactNode;\n    slotTwoProp1: string;\n    slotTwoProp2: string;\n  };\n};\n\nexport const SlotExampleComponent = withSlots\u003c\n  SlotExampleComponentSlots,\n  SlotExampleComponentProps\n\u003e(props =\u003e {\n  const {\n    children,\n    // All future slot props passed via slotProps prop\n    slotProps,\n  } = props;\n\n  return (\n    \u003cdiv\u003e\n      {slotProps.SlotOne ? (\n        \u003cdiv\u003e\n          \u003cdiv\u003e{slotProps.SlotOne.slotOneProp1}\u003c/div\u003e\n          \u003cdiv\u003e{slotProps.SlotOne.slotOneProp2}\u003c/div\u003e\n          \u003cdiv\u003e{slotProps.SlotOne.children}\u003c/div\u003e\n        \u003c/div\u003e\n      ) : (\n        \u003cdiv data-test=\"SlotOneDefaultContent\"\u003eSlotOneDefaultContentValue\u003c/div\u003e\n      )}\n      {slotProps.SlotTwo ? (\n        \u003cdiv\u003e\n          \u003cdiv\u003e{slotProps.SlotTwo.slotTwoProp1}\u003c/div\u003e\n          \u003cdiv\u003e{slotProps.SlotTwo.slotTwoProp2}\u003c/div\u003e\n          \u003cdiv\u003e{slotProps.SlotTwo.children}\u003c/div\u003e\n        \u003c/div\u003e\n      ) : (\n        \u003cdiv\u003eSlotTwoDefaultContentValue\u003c/div\u003e\n      )}\n\n      {children}\n    \u003c/div\u003e\n  );\n});\n```\n\n### Use in app with replaced layout parts\n\n```tsx\n// App.tsx\nimport React from 'react';\n\nimport { SlotExampleComponent } from './SlotExampleComponent';\n\nexport const App = () =\u003e {\n  return (\n    \u003cSlotExampleComponent {...args}\u003e\n      \u003cSlotExampleComponent.SlotOne\n        slotOneProp1=\"slotOneProp1Value\"\n        slotOneProp2=\"slotOneProp2Value\"\n      \u003e\n        SlotOneChildrenValue\n      \u003c/SlotExampleComponent.SlotOne\u003e\n      \u003cSlotExampleComponent.SlotTwo\n        data-test=\"SlotTwo\"\n        slotTwoProp1=\"slotTwoProp1Value\"\n        slotTwoProp2=\"slotTwoProp2Value\"\n      \u003e\n        SlotTwoChildrenValue\n      \u003c/SlotExampleComponent.SlotTwo\u003e\n      SlotExampleChildrenValue\n    \u003c/SlotExampleComponent\u003e\n  );\n};\n```\n\n### Optionally allow replace slot components with same name to override each other\n\nThis is especially useful for route transitions, where you briefly have both routes in DOM at the same time.\n\n## License\n\nMIT © [kolengri](https://github.com/kolengri)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolengri%2Freact-slot-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkolengri%2Freact-slot-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolengri%2Freact-slot-component/lists"}