https://github.com/twocatmoon/react-slot

A cleaner alternative for managing children in React components via named slots.
https://github.com/twocatmoon/react-slot

control-flow react slot

Last synced: about 1 month ago
JSON representation

A cleaner alternative for managing children in React components via named slots.

• Host: GitHub
• URL: https://github.com/twocatmoon/react-slot
• Owner: twocatmoon
• License: mit
• Created: 2022-03-11T18:23:12.000Z (over 4 years ago)
• Default Branch: trunk
• Last Pushed: 2024-04-23T14:59:29.000Z (about 2 years ago)
• Last Synced: 2025-08-26T05:28:10.388Z (10 months ago)
• Topics: control-flow, react, slot
• Language: TypeScript
• Homepage: https://twocatmoon.github.io/react-slot
• Size: 278 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


[![Contributors][contributors-shield]][contributors-url]

[![Forks][forks-shield]][forks-url]

[![Stargazers][stars-shield]][stars-url]

[![Issues][issues-shield]][issues-url]

[![MIT License][license-shield]][license-url]






  


  
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

      


        
Built With

      

    

    
Installation

    
Usage

    
Contributing

    
License

    
Contact

    
Acknowledgments

  


## About The Project

React Slot implements a content distribution API inspired by Vue.js and the Web Components spec draft, using the `` element to serve as distribution outlet for content.

This allows you to compose components like this:

```tsx

  Hello

  Lorem ipsum dolor sit amet.

```

Then in the template for ``, you might have:

```tsx

const slots = findSlots(props.children)

return (

  

    
{slots.title}

    
{slots.subtitle}

  

)

```


Slots can contain any template code, including HTML or even other components.

Any children not contained inside of a `` will be assigned to `slots.defaultSlot`.

(back to top)


### Built With

* [React.js](https://reactjs.org/)

* [TypeScript](https://www.typescriptlang.org/)

* [Vite](https://vitejs.dev/)

* [TypeDoc](https://typedoc.org/)

(back to top)


## Installation

1. Install from NPM

   ```sh

   npm i @twocatmoon/react-slot

   ```

2. Include in your project

   ```ts

   import { Slot, findSlots } from '@twocatmoon/react-slot'

   ```

(back to top)


## Usage

_Please refer to the [Documentation](https://twocatmoon.github.io/react-slot)_

(back to top)


## 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!

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

(back to top)


## License

Distributed under the MIT License. See `LICENSE` for more information.

(back to top)


## Contact

Twitter - [@twocatmoon](https://twitter.com/twocatmoon)

Project Link - [https://github.com/twocatmoon/react-slot](https://github.com/twocatmoon/react-slot)

(back to top)


## Acknowledgments

* [Best-README-Template](https://github.com/othneildrew/Best-README-Template)

(back to top)


[contributors-shield]: https://img.shields.io/github/contributors/twocatmoon/react-slot.svg?style=for-the-badge

[contributors-url]: https://github.com/twocatmoon/react-slot/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/twocatmoon/react-slot.svg?style=for-the-badge

[forks-url]: https://github.com/twocatmoon/react-slot/network/members

[stars-shield]: https://img.shields.io/github/stars/twocatmoon/react-slot.svg?style=for-the-badge

[stars-url]: https://github.com/twocatmoon/react-slot/stargazers

[issues-shield]: https://img.shields.io/github/issues/twocatmoon/react-slot.svg?style=for-the-badge

[issues-url]: https://github.com/twocatmoon/react-slot/issues

[license-shield]: https://img.shields.io/github/license/twocatmoon/react-slot.svg?style=for-the-badge

[license-url]: https://github.com/twocatmoon/react-slot/blob/master/LICENSE