https://github.com/andres-kovalev/react-templated
Yet another implementation of slot components for React
https://github.com/andres-kovalev/react-templated
react slot slot-components template
Last synced: 6 months ago
JSON representation
Yet another implementation of slot components for React
- Host: GitHub
- URL: https://github.com/andres-kovalev/react-templated
- Owner: andres-kovalev
- License: mit
- Created: 2019-11-12T19:49:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-13T22:42:22.000Z (about 5 years ago)
- Last Synced: 2025-03-30T17:44:41.425Z (6 months ago)
- Topics: react, slot, slot-components, template
- Language: JavaScript
- Homepage: https://andres-kovalev.github.io/react-templated/
- Size: 661 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.hbs
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/andres-kovalev/react-templated)
[](https://codecov.io/gh/andres-kovalev/react-templated)
[](https://www.npmjs.com/package/react-templated)
[](https://nodejs.org/)
[](https://www.npmjs.com/package/react-templated)
[](https://github.com/andres-kovalev/react-templated/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-templated)
[](https://conventionalcommits.org)
# react-templated
Yet another implementation of slot components for React. It's inspired by [WebComponents slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots).
> full documentation can be found on [https://andres-kovalev.github.io/react-templated/](https://andres-kovalev.github.io/react-templated/)
# Description
`react-templated` provides several components to created templated components.
{{#each components}}
* [{{fn}}](src/components/{{name}}/README.md)
{{/each}}
# Installation
As any other npm package `react-templated` can be added to your project by following command:
```bash
npm i -S react-templated
```
It requires any version of react with new context API support as peer dependency, so it should be installed as well.
```bash
npm i -S react
```
# Quick start
By default content for React component can be accessed by `children` prop:
```js
function Parent() {
return (
our div 1
our div 2
);
}
...
function Child(props) {
// here are our divs
const { children } = props;
...
}
```
But some times we need to distribute children between different areas of our component. We might want to create a template. We can extract try to extract separate children and use those:
```js
function Child({ children }) {
const [ child1, child2 ] = children.props.children;
return (
{child1}
{child2}
);
}
```
Looks a bit ugly. Also, we need to provide some safe-checks/fallbacks to prevent issues when user provides less than 2 children and we need to find some way to be able to provide only 2nd/3rd/etc item.
```js
import _ from 'lodash';
function Child({ children }) {
const [ child1, child2 ] = _.get(children, 'props.children', []);
...
}
function Parent() {
return (
body
);
}
```
Another way is to use different props for different areas:
```js
const Page = ({ header, body, footer }) => (
{ header }
{ body }
{ footer }
)
```
Looks much better, but it's still not so convenient to use such components and provide default content:
```js
const App = () => (
}
body={