https://github.com/andrey-skl/react-slotify
A react library to use Svelte/Vue/WebComponents-like slots
https://github.com/andrey-skl/react-slotify
react typescript
Last synced: about 1 year ago
JSON representation
A react library to use Svelte/Vue/WebComponents-like slots
- Host: GitHub
- URL: https://github.com/andrey-skl/react-slotify
- Owner: andrey-skl
- License: mit
- Created: 2020-09-09T13:41:46.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-09-21T10:09:10.000Z (almost 4 years ago)
- Last Synced: 2025-04-23T00:08:08.642Z (about 1 year ago)
- Topics: react, typescript
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-slotify-example-vo2ix
- Size: 295 KB
- Stars: 29
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React-slotify ([Try now](https://codesandbox.io/s/react-slotify-example-vo2ix))
[![Build Status][build-badge]][build]
[![npm bundle size][npm-bundle-size]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
A tiny way to use Slots concept in modern React apps.
## Why react-slotify:
- **✅ Replaces ["renderProps"](https://reactjs.org/docs/render-props.html) concept in a semantic way**
- **✅ Written in TypeScript with type-safe API**
- **✅ Lightweight (~500B)**
- **✅ Simple**
## Installation
Install using your package manager:
```bash
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.
```tsx
import {createSlot} from 'react-slotify';
export const MySlot = createSlot();
export const Component = ({children}) => {
return (
This component contains slot:
This is default slot content
It also renders children: {children}
);
};
```
Import your component and it's slots and use:
```tsx
import {Component, MySlot} from './component';
const App = () => {
return (
Slotted content
Other content
);
};
```
## 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:
```tsx
export const Slot = createSlot<{myParam: string}>();
export const Component = ({children}) => (
This is default slot content
);
...
const App = () => {
return (
{params => (Param is {params.myParam})}
);
};
```
[build-badge]: https://github.com/andrey-skl/react-slotify/workflows/CI/badge.svg
[build]: https://github.com/andrey-skl/react-slotify/actions
[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/react-slotify?style=flat-square
[version-badge]: https://img.shields.io/npm/v/react-slotify.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-slotify
[license-badge]: https://img.shields.io/npm/l/react-slotify.svg?style=flat-square
[license]: https://github.com/andrey-skl/react-slotify/blob/master/LICENSE