react-slotify
v0.2.2
Published
[![Build Status][build-badge]][build] [![npm bundle size][npm-bundle-size]][build] [![version][version-badge]][package]
Downloads
4,720
Readme
React-slotify (Try now)
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>
);
};