Skip to content
πŸŽ‰ Slot and Fill implementation for React 16. Portals on Steroids πŸ’ͺ
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github refactor: rename Example for Storybook Mar 17, 2019
.storybook feat: typescript typings improvements May 4, 2019
src
stories feat: typescript typings improvements May 4, 2019
.babelrc feat: add support to deploy storybook to gh-pages #6 Mar 17, 2019
.eslintrc.js
.gitignore chore: update .gitignore May 4, 2019
.prettierrc.js
CHANGELOG.md Initial commit. This implementation currently may not work as intended. Sep 1, 2018
CONTRIBUTING.md chore: add contributing.md #4 Mar 17, 2019
LICENSE
README.md chore: update README.md Mar 18, 2019
commitlint.config.js chore: convert project to use TypeScript, and pika #1 #5 Mar 16, 2019
package-lock.json feat: typescript typings improvements May 4, 2019
package.json feat: typescript typings improvements May 4, 2019
tsconfig.json

README.md

React Slot and Fill npm version License: MIT Known Vulnerabilities

πŸš€ React Slot and Fill pattern implementation made with React.createContext API. Check out the demo.

Install

You can install this library via NPM or YARN.

NPM

npm i @blackbox-vision/react-slot-fill

YARN

yarn add @blackbox-vision/react-slot-fill

Use case

If you need to render a component from somepart of the DOM tree, but it needs to be visible in another part of the tree, this library solves it.

This library is very similar to react-slot-fill, but we solve two particular issues:

  • Support for React.createContext, this library is intended to use with React >= 16.3.1.
  • If a Fill is declared after a Slot, it can render properly, which react-slot-fill doesn't support.

Usage

The usage is really simple:

// Toolbar.js
import React from 'react';
import { Slot, Fill } from '@blackbox-vision/react-slot-fill';

const Toolbar = props => (
  <div>
    <Slot name="Toolbar.Item" />
  </div>
);

export default Toolbar;

Toolbar.Item = props => (
  <Fill name="Toolbar.Item">
    <button>{props.label}</button>
  </Fill>
);
// Feature.js
import React from 'react';
import Toolbar from './Toolbar';

const Feature = () => <Toolbar.Item label="My Feature!" />;
// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from '@blackbox-vision/react-slot-fill';

import Toolbar from './Toolbar';
import Feature from './Feature';

const App = () => (
  <Provider>
    <Toolbar />
    <Feature />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Props

Slot and Fill components use the same props, which are the following ones:

Properties Types Default Value Description
name string none Determines the name of the Slot/Fill.

TODO

  • Support for passing props from Fill to Slot.
  • Support for multiple Fill for one Slot.

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

Contributing

If you want to contribute to this project see contributing for more information.

License

Distributed under the MIT license. See LICENSE for more information.

You can’t perform that action at this time.