You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



Easily and reliably support Render Props, Component Injection, and Function as a Child

Version published




Build Status npm version Coverage Status


  • This package is for component authors.
  • It allows you to easily and reliably support Render Props, Component Injection, AND Function as a Child.
  • Get increased performance from your SFCs while respecting the component's defaultProps.


$ npm i --save render-props


Simply import from render-props using ES6.

import renderProps from 'render-props';

This will import the renderProps function which takes two parameters.

renderProps(componentOrFunction, props)
  • componentOrFunction - The first parameter is whatever was passed to your component in this.props.render (or whatever you call your prop).

  • props - The second parameter is a props object. This will be spread to the function or component.


Let's say that you authored or are authoring a component that takes a render prop (Render Props) or a Component (Component Injection). There is some overhead required to support both.

This package will allow you to support both Render Props and Component Injection with zero effort.

What does this package offer over doing the work yourself?

If you support Component Injection, this package will check to see if the component is a Stateless Functional Component (SFC) and, if so, will call it directly for improved performance.

Another benefit is that Render Props can now have defaultProps. Because, let's face it, a render prop is really just the same as a SFC.

Let's take the following component. It takes a prop named render. By simply importing the render-props package, you can now accept a function, a SFC, or a class component. Almost like magic! 🎩

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() {

  render() {
    return renderProps(this.props.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 = () => (
    <h2>Traditional Render Prop</h2>
        ({ count, foo }) => (`Count = ${count} foo=${foo}`)

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

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

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, it will be called to do the rendering.

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

[Note: Starting with version 1.1.0, SFCs that specify propTypes will be rendered as Components in order to take advantage of prop validation.]

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

Support Function as a Child too!

If you would also like to support Function as a Child you can change the example code above like this.

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

It's good to note that I appall this pattern but I've shown the example for completeness.

See it Live!

Here is a CodeSandbox with the sample component shown above running live.



Package last updated on 20 Mar 2018

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc