React-slotify (Try now)
A tiny way to use Slots concept in modern React apps.
- ✅ Replaces "renderProps" concept in a semantic way
- ✅ Written in TypeScript with type-safe API
- ✅ Lightweight (~500B)
- ✅ Simple
Install using your package manager:
npm install --save react-slotify
yarn add react-slotifyIn 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>
);
};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>
);
};