hg-react-slot

A React implementation of slots.

Install

yarn add hg-react-slot

or with npm:

npm install --save hg-react-slot

Usage

Create a component with hg-react-slot :

// MyComponent.js
import React from "react";
import { Slot, withSlot } from "hg-react-slot";

const MyComponent = () => (
  <div>
    <header>
      <Slot name="header" />
      {/* `<span>anonymity</span>` will be defalut content for Slot(author) */}
      <Slot name="author">
        <span>anonymity</span>
      </Slot>
    </header>
    <main>
      {/* `<Slot />` is equivalent to `<Slot name="default" />`  */}
      <Slot />
    </main>
    <footer>
      <Slot name="footer" />
    </footer>
  </div>
);

export default withSlot(MyComponent);

In other components, you can use MyComponent like this:

// App.js
import React from "react";
import MyComponent from "./MyComponent.js";

// Because React.Fragment can only have `key` and `children` props,
// if you need to use React.Fragment, you should create a component like this:
const Frag = ({ children }) => <React.Fragment>{children}</React.Fragment>;

export default () => (
  <div>
    <div>Other Content</div>
    <MyComponent>
      <Frag slot="footer">Footer Content</Frag>
      {/* `<Frag>` is equivalent to `<Frag slot="default">`  */}
      <Frag>
        <p>paragraph1</p>
        <p>paragraph2</p>
      </Frag>
      <h3 slot="header">Header Content</h3>
    </MyComponent>
  </div>
);

After running the above code, resulting HTML is:

<div>
  <div>Other Content</div>
  <div>
    <header>
      <h3 slot="header">Header Content</h3>
      <span>anonymity</span>
    </header>
    <main>
      <p>paragraph1</p>
      <p>paragraph2</p>
    </main>
    <footer>Footer Content</footer>
  </div>
</div>

Change Log

2019.4.7

v0.2.3 Update README

2019.3.30

v0.2.2 Add travis-ci and codecov

2019.3.29

v0.2.0 Add unit test

2019.3.28

v0.1.0 Initialize project