{"id":17496069,"url":"https://github.com/andrey-skl/react-slotify","last_synced_at":"2025-04-23T00:08:16.673Z","repository":{"id":74346215,"uuid":"294124904","full_name":"andrey-skl/react-slotify","owner":"andrey-skl","description":"A react library to use Svelte/Vue/WebComponents-like slots","archived":false,"fork":false,"pushed_at":"2022-09-21T10:09:10.000Z","size":302,"stargazers_count":29,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T00:08:08.642Z","etag":null,"topics":["react","typescript"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-slotify-example-vo2ix","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/andrey-skl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2020-09-09T13:41:46.000Z","updated_at":"2024-04-13T09:10:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"a10663ee-23e4-4bdd-a713-39305041c408","html_url":"https://github.com/andrey-skl/react-slotify","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrey-skl%2Freact-slotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrey-skl%2Freact-slotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrey-skl%2Freact-slotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrey-skl%2Freact-slotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrey-skl","download_url":"https://codeload.github.com/andrey-skl/react-slotify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250343944,"owners_count":21415040,"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":["react","typescript"],"created_at":"2024-10-19T14:43:10.994Z","updated_at":"2025-04-23T00:08:16.640Z","avatar_url":"https://github.com/andrey-skl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-slotify ([Try now](https://codesandbox.io/s/react-slotify-example-vo2ix))\n\n[![Build Status][build-badge]][build]\n[![npm bundle size][npm-bundle-size]][build]\n[![version][version-badge]][package]\n\n[![MIT License][license-badge]][license]\n\n\nA tiny way to use Slots concept in modern React apps.\n\n## Why react-slotify:\n\n- **✅ Replaces [\"renderProps\"](https://reactjs.org/docs/render-props.html) concept in a semantic way**\n- **✅ Written in TypeScript with type-safe API**\n- **✅ Lightweight (~500B)**\n- **✅ Simple**\n\n## Installation\n\nInstall using your package manager:\n\n```bash\nnpm install --save react-slotify\n\nyarn add react-slotify\n```\n\n## Usage\n\nIn a component where you want to hold slots in, create and place a slot. You may have as many slots as you want.\n```tsx\nimport {createSlot} from 'react-slotify';\n\nexport const MySlot = createSlot();\n\nexport const Component = ({children}) =\u003e {\n  return (\n    \u003cdiv\u003e\n      This component contains slot:\n      \n      \u003cMySlot.Renderer childs={children}\u003e\n        This is default slot content\n      \u003c/MySlot.Renderer\u003e\n      \n      \u003cdiv\u003eIt also renders children: {children}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nImport your component and it's slots and use:\n\n```tsx\nimport {Component, MySlot} from './component';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cComponent\u003e\n        \u003cMySlot\u003eSlotted content\u003c/MySlot\u003e\n        Other content\n      \u003c/Component\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\n## Passing props back from inside slot\n\nIf your slot conent need some params from inside such as `disabled` state, you are welcome to parametrize it:\n\n```tsx\nexport const Slot = createSlot\u003c{myParam: string}\u003e();\n\nexport const Component = ({children}) =\u003e (\n  \u003cMySlot.Renderer childs={children} myParam=\"123\"\u003e\n    This is default slot content\n  \u003c/MySlot.Renderer\u003e\n);\n\n...\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cComponent\u003e\n        \u003cMySlot\u003e\n          {params =\u003e (\u003cdiv\u003eParam is {params.myParam}\u003c/div\u003e)}\n        \u003c/MySlot\u003e\n      \u003c/Component\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n[build-badge]: https://github.com/andrey-skl/react-slotify/workflows/CI/badge.svg\n[build]: https://github.com/andrey-skl/react-slotify/actions\n[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/react-slotify?style=flat-square\n[version-badge]: https://img.shields.io/npm/v/react-slotify.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-slotify\n[license-badge]: https://img.shields.io/npm/l/react-slotify.svg?style=flat-square\n[license]: https://github.com/andrey-skl/react-slotify/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrey-skl%2Freact-slotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrey-skl%2Freact-slotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrey-skl%2Freact-slotify/lists"}