react-slotify's Introduction

React-slotify

A tiny way to use Slots concept in modern React apps.

Why react-slotify:

✅ Replaces "renderProps" concept in a semantic way
✅ Written in TypeScript with type-safe API
✅ Lightweight (~500B)
✅ Simple

Installation

Install using your package manager:

npm install --save react-slotify

yarn add react-slotify

Usage

In a component where you want to hold slots in, create and place a slot. You may have as many slots as you want.

import {createSlot} from 'react-slotify';

export const MySlot = createSlot();

export const Component = ({children}) => {
  return (
    <div>
      This component contains slot:
      
      <MySlot.Renderer childs={children}>
        This is default slot content
      </MySlot.Renderer>
      
      <div>It also renders children: {children}</div>
    </div>
  );
};

Import your component and it's slots and use:

import {Component, MySlot} from './component';

const App = () => {
  return (
    <div>
      <Component>
        <MySlot>Slotted content</MySlot>
        Other content
      </Component>
    </div>
  );
};

Passing props back from inside slot

If your slot conent need some params from inside such as disabled state, you are welcome to parametrize it:

export const Slot = createSlot<{myParam: string}>();

export const Component = ({children}) => (
  <MySlot.Renderer childs={children} myParam="123">
    This is default slot content
  </MySlot.Renderer>
);

...

const App = () => {
  return (
    <div>
      <Component>
        <MySlot>
          {params => (<div>Param is {params.myParam}</div>)}
        </MySlot>
      </Component>
    </div>
  );
};

Recommend Projects