# @space307/effector-react-slots
> Effector library for slots implementation in React
Latest version **1.1.6** (published 2021-09-20) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @space307/effector-react-slots
pnpm add @space307/effector-react-slots
yarn add @space307/effector-react-slots
bun add @space307/effector-react-slots
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 1.1.6 |
| Published | 2021-09-20 |
| First published | 2021-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Viktor Pasynok |
| Maintainers | itadm, binjospookie |
| Keywords | effector, react, slots, slot |
## Links
- npm: https://www.npmjs.com/package/@space307/effector-react-slots
- Repository: https://github.com/space307/effector-react-slots
- Homepage: https://github.com/space307/effector-react-slots#readme
- Issues: https://github.com/space307/effector-react-slots/issues
- npm.io page: https://npm.io/package/@space307/effector-react-slots
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.6 (latest) — 2021-09-20
- 1.1.6-next.10 — 2021-09-20
- 1.1.6-next.3 — 2021-09-20
- 1.1.6-next.1 — 2021-09-20
- 1.1.6-next.0 — 2021-09-20
- 1.1.5 — 2021-09-20
- 1.1.5-next.1 — 2021-09-20
- 1.1.5-next.0 — 2021-09-20
- 1.1.4 — 2021-09-20
- 1.1.3 — 2021-09-20
- 1.1.3-next.0 — 2021-09-20
- 1.1.2 — 2021-09-20
- 1.1.1 — 2021-09-20
- 1.1.0 — 2021-09-20
- 1.0.0 — 2021-09-17
- … 2 more at https://npm.io/package/@space307/effector-react-slots/versions
## README
# Effector React Slots
☄️ Effector library for slots implementation in React.
## What is a slot
A slot is a place in a component where you can insert any unknown component. It's a well-known abstraction used by frameworks
such as Vue.js and Svelte.
Slots arn't present in the React. With React you can achieve this goal using props or React.Context.
In large projects this is not convenient, because it generates "props hell" or smears the logic.
Using React with Effector we can achieve slot goals without the problems described above.
[Try it out](https://codesandbox.io/s/effector-react-slots-example-eppjr?file=/src/App.tsx)
## Usage
### Step 1
```sh
npm install @space307/effector-react-slots
```
or
```sh
yarn add @space307/effector-react-slots
```
### Step 2
Define constant with slots name and call `createSlotFactory`.
```typescript
import { createSlotFactory } from '@space307/effector-react-slots';
export const SLOTS = {
FOO: 'foo',
} as const;
export const { api, createSlot } = createSlotFactory({ slots: SLOTS });
```
### Step 3
Create Slot component.
```tsx
import React from 'react';
import { useStoreMap } from 'effector-react';
import { createSlot, SLOTS } from './slots';
export const { Slot: FooSlot } = createSlot({ id: SLOTS.FOO });
```
### Step 4
Insert Slot component to your UI.
```tsx
import React from 'react';
import { FooSlot } from './fooSlot';
export const ComponentWithSlot = () => (
<>
Hello, Slots!
);
```
### Step 5
Render something inside slot. For example, based on data from feature toogle of your app.
```tsx
import { split } from 'effector';
import { $featureToggle } from './featureToggle';
import { api, SLOTS } from './slots';
const MyAwesomeFeature = () => Look at my horse
;
const VeryAwesomeFeature = () => My horse is amaizing
;
split({
source: $featureToggle,
match: {
awesome: (data) => data === 'awesome',
veryAwesome: (data) => data === 'veryAwesome',
hideAll: (data) => data === 'hideAll',
},
cases: {
awesome: api.set.prepend(() => ({ id: SLOTS.FOO, component: MyAwesomeFeature })),
veryAwesome: api.set.prepend(() => ({ id: SLOTS.FOO, component: VeryAwesomeFeature })),
hideAll: api.remove.prepend(() => ({ id: SLOTS.FOO })),
},
});
```
[Try it out](https://codesandbox.io/s/effector-react-slots-example-eppjr?file=/src/App.tsx)
## API
### createSlotFactory
Function that returns a function for creating slots and an API for manipulating them.
```typescript
import { createSlotFactory } from '@space307/effector-react-slots';
const { createSlot, api } = createSlotFactory({ slots: { FOO: 'foo' } });
```
### createSlot
Function, takes the slot id. Returns Slot component.
```typescript
const { Slot } = createSlot({ id: 'foo' });
```
### api.set
Method for rendering component in a slot. Takes slot id and component.
```typescript
api.set({ id: 'foo', component: Foo });
```
### api.remove
Method to stop rendering component in a slot. Takes slot id.
```typescript
api.remove({ id: 'foo' });
```
## TypeScript guide
### createSlot
Props of component passed to slot can be defined as generic.
```typescript
const slot = createSlot<{ readonly text: string }>({ id: 'heading' });
```
## Useful links
* [Slots proposal](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)
* [Vue.js docs](https://v3.vuejs.org/guide/component-slots.html)
* [Svelte docs](https://svelte.dev/docs#slot)
---
_Source: https://npm.io/package/@space307/effector-react-slots · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._