@blackbox-vision/react-slot-fill
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    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 debug={true || false}>
        <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.
    debug boolean false Enable logging to detect issues with 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.

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    0

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    44.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • jonatansalas
    • manutuero