Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/space307/effector-react-slots
:comet: Effector library for slots implementation in React
https://github.com/space307/effector-react-slots
Last synced: about 2 months ago
JSON representation
:comet: Effector library for slots implementation in React
- Host: GitHub
- URL: https://github.com/space307/effector-react-slots
- Owner: space307
- License: mit
- Created: 2021-09-17T17:25:16.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T18:15:21.000Z (over 1 year ago)
- Last Synced: 2024-09-20T11:16:15.465Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.49 MB
- Stars: 27
- Watchers: 4
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - @space307/effector-react-slots - Effector library for slots implementation in React. (Packages)
README
# Effector React Slots
☄️ Effector library for slots implementation in React.
- [What is a slot](#what-is-a-slot)
- [Usage](#usage)
- [Step 1](#step-1)
- [Step 2](#step-2)
- [Step 3](#step-3)
- [Step 4](#step-4)
- [Step 5](#step-5)
- [API](#api)
- [createSlotFactory](#createslotfactory)
- [createSlot](#createslot)
- [api.set](#apiset)
- [api.remove](#apiremove)
- [api.hide](#apihide)
- [api.show](#apishow)
- [api.attachLogger](#apiattachlogger)
- [Arguments](#arguments)
- [`fn`](#fn)
- [`watchList`](#watchlist)
- [Advanced](#advanced)
- [Fallback content](#fallback-content)
- [TypeScript guide](#typescript-guide)
- [createSlot](#createslot-1)
- [Useful links](#useful-links)
## 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 aren'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 avoiding the problems described above.
[Try it out](https://replit.com/@binjospookie/effector-react-slots-example)
## Usage
### Step 1
```sh
npm install effector-react-slots
```
or
```sh
yarn add effector-react-slots
```
### Step 2
Define constant with slots name and call `createSlotFactory`.
```typescript
import { createSlotFactory } from 'effector-react-slots';
export const SLOTS = {
FOO: 'foo',
} as const;
export const { api, createSlot } = createSlotFactory(SLOTS);
```
### Step 3
Create Slot component.
```ts
import { createSlot, SLOTS } from './slots';
export const { Slot: FooSlot } = createSlot(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 toggle 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',
},
cases: {
awesome: api.set.prepend(() => ({ id: SLOTS.FOO, component: MyAwesomeFeature })),
veryAwesome: api.set.prepend(() => ({ id: SLOTS.FOO, component: VeryAwesomeFeature })),
__: api.remove.prepend(() => ({ id: SLOTS.FOO })),
},
});
```
[Try it out](https://replit.com/@binjospookie/effector-react-slots-example)
## API
### createSlotFactory
Function that returns a function for creating slots and an API for manipulating them.
```typescript
const SLOTS = {
FOO: 'foo'
};
const { createSlot, api } = createSlotFactory(SLOTS);
```
### createSlot
Function, takes the slot id. Returns Slot component.
```typescript
const { Slot } = createSlot('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' });
```
### api.hide
Allows to hide the slot data. Like `api.remove`, without deleting the slot data. Takes slot id.
```typescript
api.hide({ id: 'foo' });
```
### api.show
Allows to show a hidden slot data. Takes slot id.
```typescript
api.show({ id: 'foo' });
```
### api.attachLogger
> Since v2.2.0
Allows to log actions that take place with slots.
```typescript
api.attachLogger();
slotApi.attachLogger({
fn: ({ meta: { slotId } }) => console.info(slotId),
});
slotApi.attachLogger({
watchList: [SLOTS.FOO, SLOTS.BAR],
});
slotApi.attachLogger({
watchList: [SLOTS.FOO, SLOTS.BAR],
fn: ({ meta: { slotId } }) => console.info(slotId),
});
```
#### Arguments
##### `fn`
Optional. Function which could be used for logging.
Accepts object:
```typescript
{
meta: {
action: 'set' | 'remove' | 'hide' | 'show',
slotId: SlotId,
slotName: string;
};
message: string;
}
```
##### `watchList`
```typescript
type: SlotId[]
```
Optional. Allows to specify which slots should be logged.
```typescript
slotApi.attachLogger({
watchList: [SLOTS.FOO, SLOTS.BAR],
});
```
## Advanced
### Fallback content
> Since v2.1.0
Slot can contain fallback content that is rendered if no component are passed.
```tsx
import { render } from 'render';
import { createSlotFactory } from 'effector-react-slots';
const SLOTS = {
FOO: 'foo',
} as const;
const { api, createSlot } = createSlotFactory(SLOTS);
const { Slot: FooSlot } = createSlot(SLOTS.FOO);
const MyAwesomeFeature = () =>
Look at my horse
;
const ComponentWithSlot = () => Fallback text;
render(ComponentWithSlot); // "Fallback text"
api.set({ id: SLOTS.FOO, component: MyAwesomeFeature });
render(ComponentWithSlot); // "Look at my horse"
api.remove({ id: SLOTS.FOO });
render(ComponentWithSlot); // "Fallback text"
```
## TypeScript guide
### createSlot
Props of component passed to slot can be defined as generic.
```typescript
createSlot<{ readonly count: number }>(string);
```
## 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)