https://github.com/hamlim/react-slot-fill
A simple react implementation of web-component's slot mechanism.
https://github.com/hamlim/react-slot-fill
components higher-order-component react reactjs webcomponents
Last synced: 4 months ago
JSON representation
A simple react implementation of web-component's slot mechanism.
- Host: GitHub
- URL: https://github.com/hamlim/react-slot-fill
- Owner: hamlim
- Created: 2017-05-11T00:26:42.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-13T22:48:36.000Z (about 9 years ago)
- Last Synced: 2025-11-10T12:11:32.248Z (8 months ago)
- Topics: components, higher-order-component, react, reactjs, webcomponents
- Language: JavaScript
- Size: 3.91 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Slot-Fill
*** Not ready for primetime yet ***
React-Slot-Fill is a simple implementation of a component rendering pattern that is
developed to mimic web-component's `` API.
## Why?
This pattern was developed to avoid messy props-as-nodes components like this:
```Javascript
Some other jsx here, potentially other components and things
}
/>
```
Using React-Slot-Fill, the above example can become far more composable:
```Javascript
Some other jsx here, potentially other components and things
```
This above is a bit of a contrived example because if you only need to insert one thing into the CustomComponent, then `props.children` would be a far more suitable solution.
## How do I use this?
When designing your components, you can use `` as a placeholder for whatever you want the implementor to render inside the component.
```Javascript
const MyCustomComponent = props => (
some internal content not affected by `React-Slot-Fill`
Some more internal content
);
```
Where:
* `` accepts one prop `name` that is used to match it to a ``
Then when you want to use your component you can do the following:
```Javascript
const MyApp = props => (
some app content
some content that will be inserted into the associated ``
)
```
## Examples:
Please see [/examples/examples.md](/examples/examples.md)
### NOTES:
This is an extremely early API, there are plenty of untested edge cases. Feel free to browse through the Github issues for notes on things I plan on working on soon, or to post general questions.