https://github.com/developit/preact-slots

🕳 Render Preact trees into other Preact trees, like portals.
https://github.com/developit/preact-slots

preact preact-components

Last synced: 3 days ago
JSON representation

🕳 Render Preact trees into other Preact trees, like portals.

• Host: GitHub
• URL: https://github.com/developit/preact-slots
• Owner: developit
• Created: 2018-01-29T21:52:06.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-19T01:41:40.000Z (over 4 years ago)
• Last Synced: 2024-10-17T13:58:28.934Z (17 days ago)
• Topics: preact, preact-components
• Language: JavaScript
• Homepage: https://npm.im/preact-slots
• Size: 62.5 KB
• Stars: 156
• Watchers: 4
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - preact-slots

README

        


    



# preact-slots [![npm](https://img.shields.io/npm/v/preact-slots.svg?style=flat)](https://www.npmjs.org/package/preact-slots) [![travis](https://travis-ci.org/developit/preact-slots.svg?branch=master)](https://travis-ci.org/developit/preact-slots)

Render Preact trees into other Preact trees, like portals.

## Install

**preact-slots** is available on npm:

`npm install --save preact-slots`

### Usage

Define "holes" in your appliation using ``,

then fill them using `some content`:

```js

import { SlotProvider, Slot, SlotContent } from 'preact-slots'

render(

    

        


            

                Some Fallback Content

            

            

                Replacement Content

            

        

    

)

```


The above renders `
Replacement Content
`.


An extended example follows:

```js

import { Slot, SlotContent, SlotProvider } from 'preact-slots'

const Header = () => (

    

        Slots Demo

        

            { items => items && {items} }

        

    

)

const EditPage = ({ page, content, onSave, onCancel }) => (

    


        Editing {page}

        

            Save

            Cancel

        

        

    

)


render(

    

        


            

            

        

    

)

```


### Similar Libraries

Slots are a concept that has been around for a while.

In particular, [@camwest](https://github.com/camwest)'s [react-slot-fill](https://github.com/camwest/react-slot-fill) is similar to preact-slots, but geared towards React.

### License

[MIT License](https://oss.ninja/mit/developit) © [Jason Miller](https://jasonformat.com)