Skip to content
A React implementation of slots.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/src
src
.babelrc.js
.eslintignore
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
rollup.config.js
webpack.config.js
yarn.lock

README.md

hg-react-slot

build codecov NPM npm

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

You can’t perform that action at this time.