{"id":13496174,"url":"https://github.com/space307/effector-react-slots","last_synced_at":"2026-01-23T00:27:50.649Z","repository":{"id":46124169,"uuid":"407625890","full_name":"space307/effector-react-slots","owner":"space307","description":":comet: Effector library for slots implementation in React","archived":false,"fork":false,"pushed_at":"2023-07-19T18:15:21.000Z","size":1563,"stargazers_count":27,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-12-24T23:59:41.151Z","etag":null,"topics":[],"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/space307.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2021-09-17T17:25:16.000Z","updated_at":"2023-12-01T08:17:33.000Z","dependencies_parsed_at":"2024-04-18T12:51:45.253Z","dependency_job_id":"42213f2d-86fe-47be-9bf8-e54ec2919445","html_url":"https://github.com/space307/effector-react-slots","commit_stats":{"total_commits":110,"total_committers":5,"mean_commits":22.0,"dds":"0.19999999999999996","last_synced_commit":"b561776b38d8f821d5b61ea035d0e77f16798255"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/space307/effector-react-slots","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space307%2Feffector-react-slots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space307%2Feffector-react-slots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space307%2Feffector-react-slots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space307%2Feffector-react-slots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/space307","download_url":"https://codeload.github.com/space307/effector-react-slots/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/space307%2Feffector-react-slots/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28676143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T20:48:19.482Z","status":"ssl_error","status_checked_at":"2026-01-22T20:48:14.968Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T19:01:43.381Z","updated_at":"2026-01-23T00:27:50.625Z","avatar_url":"https://github.com/space307.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Packages"],"sub_categories":[],"readme":"# Effector React Slots\n\n☄️ Effector library for slots implementation in React.\n\n![Made with love in ~/.space307](https://madewithlove.now.sh/ru?heart=true\u0026colorA=%23000000\u0026colorB=%2304b2b9\u0026text=%7E%2F.space307)\n\n- [What is a slot](#what-is-a-slot)\n- [Usage](#usage)\n  - [Step 1](#step-1)\n  - [Step 2](#step-2)\n  - [Step 3](#step-3)\n  - [Step 4](#step-4)\n  - [Step 5](#step-5)\n- [API](#api)\n  - [createSlotFactory](#createslotfactory)\n  - [createSlot](#createslot)\n  - [api.set](#apiset)\n  - [api.remove](#apiremove)\n  - [api.hide](#apihide)\n  - [api.show](#apishow)\n  - [api.attachLogger](#apiattachlogger)\n    - [Arguments](#arguments)\n      - [`fn`](#fn)\n      - [`watchList`](#watchlist)\n- [Advanced](#advanced)\n  - [Fallback content](#fallback-content)\n- [TypeScript guide](#typescript-guide)\n  - [createSlot](#createslot-1)\n- [Useful links](#useful-links)\n\n## What is a slot\n\nA slot is a place in a component where you can insert any unknown component. It's a well-known abstraction used by frameworks\nsuch as Vue.js and Svelte.\n\nSlots aren't present in the React. With React you can achieve this goal using props or React.Context.\nIn large projects this is not convenient, because it generates \"props hell\" or smears the logic.\n\nUsing React with Effector we can achieve slot goals avoiding the problems described above.\n\n[Try it out](https://replit.com/@binjospookie/effector-react-slots-example)\n\n## Usage\n\n### Step 1\n\n```sh\nnpm install effector-react-slots\n```\n\nor\n\n```sh\nyarn add effector-react-slots\n```\n\n### Step 2\n\nDefine constant with slots name and call `createSlotFactory`.\n\n```typescript\nimport { createSlotFactory } from 'effector-react-slots';\n\nexport const SLOTS = {\n  FOO: 'foo',\n} as const;\n\nexport const { api, createSlot } = createSlotFactory(SLOTS);\n```\n\n### Step 3\n\nCreate Slot component.\n\n```ts\nimport { createSlot, SLOTS } from './slots';\n\nexport const { Slot: FooSlot } = createSlot(SLOTS.FOO);\n```\n\n### Step 4\n\nInsert Slot component to your UI.\n\n```tsx\nimport React from 'react';\n\nimport { FooSlot } from './fooSlot';\n\nexport const ComponentWithSlot = () =\u003e (\n  \u003c\u003e\n    \u003ch1\u003eHello, Slots!\u003c/h1\u003e\n    \u003cFooSlot /\u003e\n  \u003c/\u003e\n);\n```\n\n### Step 5\n\nRender something inside slot. For example, based on data from feature toggle of your app.\n\n```tsx\nimport { split } from 'effector';\n\nimport { $featureToggle } from './featureToggle';\nimport { api, SLOTS } from './slots';\n\nconst MyAwesomeFeature = () =\u003e \u003cp\u003eLook at my horse\u003c/p\u003e;\nconst VeryAwesomeFeature = () =\u003e \u003cp\u003eMy horse is amaizing\u003c/p\u003e;\n\nsplit({\n  source: $featureToggle,\n  match: {\n    awesome: (data) =\u003e data === 'awesome',\n    veryAwesome: (data) =\u003e data === 'veryAwesome',\n  },\n  cases: {\n    awesome: api.set.prepend(() =\u003e ({ id: SLOTS.FOO, component: MyAwesomeFeature })),\n    veryAwesome: api.set.prepend(() =\u003e ({ id: SLOTS.FOO, component: VeryAwesomeFeature })),\n    __: api.remove.prepend(() =\u003e ({ id: SLOTS.FOO })),\n  },\n});\n```\n\n[Try it out](https://replit.com/@binjospookie/effector-react-slots-example)\n\n## API\n\n### createSlotFactory\n\nFunction that returns a function for creating slots and an API for manipulating them.\n\n```typescript\nconst SLOTS = {\n  FOO: 'foo'\n};\n\nconst { createSlot, api } = createSlotFactory(SLOTS);\n```\n\n### createSlot\n\nFunction, takes the slot id. Returns Slot component.\n\n```typescript\nconst { Slot } = createSlot('foo');\n```\n\n### api.set\n\nMethod for rendering component in a slot. Takes slot id and component.\n\n```typescript\napi.set({ id: 'foo', component: Foo });\n```\n\n### api.remove\n\nMethod to stop rendering component in a slot. Takes slot id.\n\n```typescript\napi.remove({ id: 'foo' });\n```\n\n### api.hide\n\nAllows to hide the slot data. Like `api.remove`, without deleting the slot data. Takes slot id.\n\n```typescript\napi.hide({ id: 'foo' });\n```\n\n### api.show\n\nAllows to show a hidden slot data. Takes slot id.\n\n```typescript\napi.show({ id: 'foo' });\n```\n\n### api.attachLogger\n\n\u003e Since v2.2.0\n\nAllows to log actions that take place with slots.\n\n```typescript\napi.attachLogger();\n\nslotApi.attachLogger({\n  fn: ({ meta: { slotId } }) =\u003e console.info(slotId),\n});\n\nslotApi.attachLogger({\n  watchList: [SLOTS.FOO, SLOTS.BAR],\n});\n\nslotApi.attachLogger({\n  watchList: [SLOTS.FOO, SLOTS.BAR],\n  fn: ({ meta: { slotId } }) =\u003e console.info(slotId),\n});\n```\n\n#### Arguments\n\n##### `fn`\n\nOptional. Function which could be used for logging.\nAccepts object:\n\n```typescript\n{\n  meta: {\n    action: 'set' | 'remove' | 'hide' | 'show',\n    slotId: SlotId,\n    slotName: string;\n  };\n  message: string;\n}\n```\n\n##### `watchList`\n\n```typescript\ntype: SlotId[]\n```\n\nOptional. Allows to specify which slots should be logged.\n\n```typescript\nslotApi.attachLogger({\n  watchList: [SLOTS.FOO, SLOTS.BAR],\n});\n```\n\n## Advanced\n\n### Fallback content\n\n\u003e Since v2.1.0\n\nSlot can contain fallback content that is rendered if no component are passed.\n\n```tsx\nimport { render } from 'render';\nimport { createSlotFactory } from 'effector-react-slots';\n\nconst SLOTS = {\n  FOO: 'foo',\n} as const;\n\nconst { api, createSlot } = createSlotFactory(SLOTS);\nconst { Slot: FooSlot } = createSlot(SLOTS.FOO);\n\nconst MyAwesomeFeature = () =\u003e \u003cp\u003eLook at my horse\u003c/p\u003e;\nconst ComponentWithSlot = () =\u003e \u003cFooSlot\u003eFallback text\u003c/FooSlot\u003e;\n\nrender(ComponentWithSlot); // \"Fallback text\"\napi.set({ id: SLOTS.FOO, component: MyAwesomeFeature });\nrender(ComponentWithSlot); // \"Look at my horse\"\napi.remove({ id: SLOTS.FOO });\nrender(ComponentWithSlot); // \"Fallback text\"\n```\n\n## TypeScript guide\n\n### createSlot\n\nProps of component passed to slot can be defined as generic.\n\n```typescript\ncreateSlot\u003c{ readonly count: number }\u003e(string);\n```\n\n## Useful links\n* [Slots proposal](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)\n* [Vue.js docs](https://v3.vuejs.org/guide/component-slots.html)\n* [Svelte docs](https://svelte.dev/docs#slot)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace307%2Feffector-react-slots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspace307%2Feffector-react-slots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspace307%2Feffector-react-slots/lists"}