New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

react-templated

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-templated

Yet another implementation of slot components for React

latest

Source

npm

Version: 1.0.1

Version published: 6 years ago

Maintainers: 1

Created: 6 years ago

Source

react-templated

Yet another implementation of slot components for React. It's inspired by WebComponents slots.

full documentation can be found on https://andres-kovalev.github.io/react-templated/

Description

react-templated provides several components to created templated components.

Installation

As any other npm package react-templated can be added to your project by following command:

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.

npm i -S react

Quick start

By default content for React component can be accessed by children prop:

function Parent() {
    return (
        <Child>
            <div>our div 1</div>
            <div>our div 2</div>
        </Child>
    );
}

...

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:

function Child({ children }) {
    const [ child1, child2 ] = children.props.children;

    return (
        <React.Fragment>
            <div className="header">
                {child1}
            </div>
            <div className="body">
                {child2}
            </div>
        </React.Fragment>
    );
}

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.

import _ from 'lodash';

function Child({ children }) {
    const [ child1, child2 ] = _.get(children, 'props.children', []);

    ...
}

function Parent() {
    return (
        <React.Fragment />
        <div>body</div>
    );
}

Another way is to use different props for different areas:

const Page = ({ header, body, footer }) => (
    <div className="page">
        <div className="header">
            { header }
        </div>
        <div className="body">
            { body }
        </div>
        <div className="header">
            { footer }
        </div>
    </div>
)

Looks much better, but it's still not so convenient to use such components and provide default content:

const App = () => (
    <Page
        header={ <Header /> }
        body={ <Body /> }
        footer={ <Footer /> }
        />
);

// or

const App = () => {
    const header = <Header />;
    const body = <Body />;
    const footer = <Footer />;

    const props = { header, body, footer };

    return <Page { ...props } />;
}

One more option is to use slots from react-templated package. First we need to create our template:

import { Slot, withSlots, Value } from 'react-templated';

// it's not necessary to provide any props for template
const PageTemplate = () => (
    <div className="page">
        <div className="header">
            <Slot name="header">
                Slot content will be found by slot name
                We can provide default content for the slot here
            </Slot>
        </div>
        <div className="body">
            <Slot>
                We can skip name to mark slot as default
            </Slot>
        </div>
        <div className="header">
            <Slot name="footer" />
            {/* it's not necessary to provide default content */}
        </div>
    </div>
);

The next step is to enhance our component with slot power:

const Page = withSlots(PageTemplate);

Now we can provide any content for Page component and it will be distributed automatically:

const App = () => (
    <Page>
        <Value name="header">
            Header content
        </Value>
        <Value name="footer">
            Footer content
        </Value>
        Everything else will be considered as default content
        and will appear in default slot
    </Page>
);

That's it. For those, who don't like HoCs react-templated provides Templated wrapper:

import { Templated } from 'react-templated';

const Page = ({ children }) => (
    <Templated content={ children }>
        <PageTemplate />
    <Templated>
);

The code abowe is equivalent to withSlots() HoC.

Keywords

react

template

slot

FAQs

What is react-templated?

Is react-templated well maintained?

Package last updated on 13 Nov 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install