Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
effector-react-slots
Advanced tools
☄️ Effector library for slots implementation in React.
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.
npm install effector-react-slots
or
yarn add effector-react-slots
Define constant with slots name and call createSlotFactory
.
import { createSlotFactory } from 'effector-react-slots';
export const SLOTS = {
FOO: 'foo',
} as const;
export const { api, createSlot } = createSlotFactory(SLOTS);
Create Slot component.
import { createSlot, SLOTS } from './slots';
export const { Slot: FooSlot } = createSlot(SLOTS.FOO);
Insert Slot component to your UI.
import React from 'react';
import { FooSlot } from './fooSlot';
export const ComponentWithSlot = () => (
<>
<h1>Hello, Slots!</h1>
<FooSlot />
</>
);
Render something inside slot. For example, based on data from feature toggle of your app.
import { split } from 'effector';
import { $featureToggle } from './featureToggle';
import { api, SLOTS } from './slots';
const MyAwesomeFeature = () => <p>Look at my horse</p>;
const VeryAwesomeFeature = () => <p>My horse is amaizing</p>;
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 })),
},
});
Function that returns a function for creating slots and an API for manipulating them.
const SLOTS = {
FOO: 'foo'
};
const { createSlot, api } = createSlotFactory(SLOTS);
Function, takes the slot id. Returns Slot component.
const { Slot } = createSlot('foo');
Method for rendering component in a slot. Takes slot id and component.
api.set({ id: 'foo', component: Foo });
Method to stop rendering component in a slot. Takes slot id.
api.remove({ id: 'foo' });
Allows to hide the slot data. Like api.remove
, without deleting the slot data. Takes slot id.
api.hide({ id: 'foo' });
Allows to show a hidden slot data. Takes slot id.
api.show({ id: 'foo' });
Since v2.2.0
Allows to log actions that take place with slots.
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),
});
fn
Optional. Function which could be used for logging. Accepts object:
{
meta: {
action: 'set' | 'remove' | 'hide' | 'show',
slotId: SlotId,
slotName: string;
};
message: string;
}
watchList
type: SlotId[]
Optional. Allows to specify which slots should be logged.
slotApi.attachLogger({
watchList: [SLOTS.FOO, SLOTS.BAR],
});
Since v2.1.0
Slot can contain fallback content that is rendered if no component are passed.
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 = () => <p>Look at my horse</p>;
const ComponentWithSlot = () => <FooSlot>Fallback text</FooSlot>;
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"
Props of component passed to slot can be defined as generic.
createSlot<{ readonly count: number }>(string);
FAQs
Effector library for slots implementation in React
We found that effector-react-slots demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.