Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

effector-react-slots

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

effector-react-slots

Effector library for slots implementation in React

  • 2.4.0-next.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Effector React Slots

☄️ Effector library for slots implementation in React.

Made with love in ~/.space307

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

Usage

Step 1

npm install effector-react-slots

or

yarn add effector-react-slots

Step 2

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);

Step 3

Create Slot component.

import { createSlot, SLOTS } from './slots';

export const { Slot: FooSlot } = createSlot(SLOTS.FOO);

Step 4

Insert Slot component to your UI.

import React from 'react';

import { FooSlot } from './fooSlot';

export const ComponentWithSlot = () => (
  <>
    <h1>Hello, Slots!</h1>
    <FooSlot />
  </>
);

Step 5

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 })),
  },
});

Try it out

API

createSlotFactory

Function that returns a function for creating slots and an API for manipulating them.

const SLOTS = {
  FOO: 'foo'
};

const { createSlot, api } = createSlotFactory(SLOTS);

createSlot

Function, takes the slot id. Returns Slot component.

const { Slot } = createSlot('foo');

api.set

Method for rendering component in a slot. Takes slot id and component.

api.set({ id: 'foo', component: Foo });

api.remove

Method to stop rendering component in a slot. Takes slot id.

api.remove({ id: 'foo' });

api.hide

Allows to hide the slot data. Like api.remove, without deleting the slot data. Takes slot id.

api.hide({ id: 'foo' });

api.show

Allows to show a hidden slot data. Takes slot id.

api.show({ id: 'foo' });

api.attachLogger

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),
});
Arguments
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],
});

Advanced

Fallback content

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"

TypeScript guide

createSlot

Props of component passed to slot can be defined as generic.

createSlot<{ readonly count: number }>(string);

Keywords

FAQs

Package last updated on 02 Feb 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc