render-props

render-props

TL;DR

• This package is for component authors.
• It allows you to easily and reliably call either a Render Prop or Component Injection.
• Get increased performance from you SFCs.
• Respects the component's defaultProps.

Install

$ npm i --save render-props

Usage

import renderProps from 'render-props';

class MyComponent extends Component {
  state = {};

  componentDidMount() {
    this.timer = setInterval(() => {
      const currentCount = this.state.count || 0;
      this.setState({ count: currentCount + 1 });
    }, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const { render } = this.props;
    return renderProps(render, this.state);
  }
}

You can use any of the following and they will all render properly.

const RenderCountSFC = ({ count, foo }) => ( 
  `Count = ${count} foo=${foo}`
);
RenderCountSFC.defaultProps = {
  foo: 'foo',
  count: 0,
};

class RenderCount extends Component {
  render() {
    const { count, foo } = this.props;
    return (
      `Count = ${count} foo=${foo}`
    );
  }
}
RenderCount.defaultProps = {
  foo: 'foo',
  count: 0,
};

const App = () => (
  <div>
    <h2>Traditional Render Prop</h2>
    <MyComponent
      render={
        ({ count, foo }) => (`Count = ${count} foo=${foo}`)
      }
    />

    <h2>Component Injection (SFC)</h2>
    <MyComponent render={RenderCountSFC} />

    <h2>Using Component Injection (class)</h2>
    <MyComponent render={RenderCount} />
  </div>
);

This will work no matter what you pass in the render prop. You can pass a function, a Stateless Functional Component (SFC), or a class component. In any case, if will be called to do the rendering.

Plus, if you pass a SFC, if will be rendered by calling it directly. This is a huge performance boost over using JSX/React.createElement.

This helper will also merge in any defaultProps that your component might be using.