React Slot
A cleaner alternative for managing children in React components via named slots.
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
About The Project
React Slot implements a content distribution API inspired by Vue.js and the Web Components spec draft, using the <Slot> element to serve as distribution outlet for content.
This allows you to compose components like this:
<SectionHeader>
<Slot name='title'>Hello</Slot>
<Slot name='subtitle'>Lorem ipsum dolor sit amet.</Slot>
</SectionHeader>
Then in the template for <Header>, you might have:
const slots = findSlots(props.children)
return (
<header>
<h1>{slots.title}</h1>
<p>{slots.subtitle}</p>
</header>
)
Slots can contain any template code, including HTML or even other components.
Any children not contained inside of a <Slot> will be assigned to slots.defaultSlot.
Built With
Installation
- Install from NPM
npm i @twocatmoon/react-slot - Include in your project
import { Slot, findSlots } from '@twocatmoon/react-slot'
Usage
Please refer to the Documentation
Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Twitter - @twocatmoon
Project Link - https://github.com/twocatmoon/react-slot