Skip to content
Slot & Fill component for merging React subtrees together. Portal on steroids.
TypeScript JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Craga89 and camwest chore: Remove alpha status from README (#32)
Now thta 2.0.0 is out the door this little snippet can be removed! 👍. Also, is it possible to list the 2.0.0 in GitHub's releases page? It's a handy way to tell what versions the library is currently on for those of us who don't want to check NPM.
Latest commit 6025f5c Nov 17, 2017

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images add docs Mar 7, 2017
public pretend we are using real react Mar 6, 2017
script update to support TypeScript 2.3.0 and React 15.5.x Apr 21, 2017
src update and fix build issues Nov 3, 2017
.eslintignore add missing dependencies Apr 3, 2017
.eslintrc.js dump lint rules directly in to make codacy happy Apr 3, 2017
.gitignore remove lib from repo Mar 18, 2017
.npmignore add typescript support to prepublish Apr 3, 2017
CHANGELOG.md version bump Nov 3, 2017
CODE_OF_CONDUCT.md add docs Mar 7, 2017
CONTRIBUTING.md add docs Mar 7, 2017
DEVELOPING.md add docs Mar 7, 2017
LICENSE add docs Mar 7, 2017
README.md chore: Remove alpha status from README (#32) Nov 17, 2017
circle.yml Add missing email and name to git config Mar 21, 2017
package.json version bump Nov 3, 2017
rollup.config.js update rollup and fix mitt import (#31) Nov 3, 2017
tsconfig.json fix mitt es6 import issue May 10, 2017
tsconfig.test.json Fixes #24 Provider only accepts a single child (#29) Nov 3, 2017
tslint.json wip initial typescript conversion Apr 3, 2017
yarn.lock update and fix build issues Nov 3, 2017

README.md

react-slot-fill · CircleCI Status Codacy Badge PRs Welcome

Image

Slot & Fill component for merging React subtrees together.

Check out the simple demo on glitch (view source)

Installation

npm install react-slot-fill --save

Check out the examples locally

git clone https://github.com/camwest/react-slot-fill
cd react-slot-fill
npm start

Usage

Note These examples use React Fiber Alpha

Toolbar.js

import { Slot, Fill } from '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 Toolbar from './Toolbar';

const Feature = () =>
  [
    <Toolbar.Item label="My Feature!" />
  ];

App.js

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

import { Provider } from 'react-slot-fill';

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

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

Components

Creates a Slot/Fill context. All Slot/Fill components must be descendants of Provider. You may only pass a single descendant to Provider.

interface Provider {
  /**
   * Returns instances of Fill react components
   */
  getFillsByName(name: string): Fill[];
  /**
   * Return React elements that were inside Fills
   */
  getChildrenByName(name: string): React.ReactChild[];
}

getFillsByName and getChildrenByName are really useful for testing Fill components. See src/lib/__tests/Provider.test.tsx for an example.

Expose a global extension point

import { Slot } from 'react-slot-fill';

Props

interface Props {
  /**
   * The name of the component. Use a symbol if you want to be 100% sue the Slot
   * will only be filled by a component you create
   */
  name: string | Symbol;

  /**
   * Props to be applied to the child Element of every fill which has the same name.
   *
   *  If the value is a function, it must have the following signature:
   *    (target: Fill, fills: Fill[]) => void;
   *
   *  This allows you to access props on the fill which invoked the function
   *  by using target.props.something()
   */
  fillChildProps?: {[key: string]: any}

  /**
   * A an optional function which gets all of the current fills for this slot
   * Allows sorting, or filtering before rendering. An example use-case could
   * be to only show a limited amount of fills.
   *
   * By default Slot injects an unstyled `<div>` element. If you want greater
   * control over presentation use this function.
   *
   * @example
   * <Slot name="My.Slot">
   * {(items) => <Component>{items}</Component>}
   * </Slot>
   */
  children?: (fills) => JSX.Element
}

Render children into a Slot

import { Fill } from 'react-slot-fill';

Props

interface Props {
  /**
   * The name of the slot that this fill should be related to.
   */
  name: string | Symbol

  /**
   * one or more JSX.Elements which will be rendered
   */
  children: JSX.Element | JSX.Element[]
}

You can add additional props to the Fill which can be accessed in the parent node of the slot via fillChildProps.

You can’t perform that action at this time.