Universal Children Definition for React Components


Easily create a component which is render-prop, Function-as-a-child and component-prop.

import {render} from 'react-universal-interface';

class MyData extends React.Component {
    render () {
        return render(this.props, this.state);

Now you can use it:

<MyData render={(state) =>
    <MyChild {...state} />
} />

<MyData>{(state) =>
    <MyChild {...state} />

<MyData comp={MyChild} />
<MyData component={MyChild} />

Use this badge if you support universal interface:

[![React Universal Interface](](

Given a <MyData> component, it is said to follow universal component interface if, and only if, it supports all the below usage patterns:

// Function as a Child Component (FaCC)
    (data) => <Child {} />

// Render prop
<MyData render={
    (data) => <Child {} />
} />

// Component prop
<MyData component={Child} />
<MyData comp={Child} />

// Prop injection
    <Child />

// Higher Order Component (HOC)
const ChildWithData = withData(Child);

// Decorator
class ChildWithData extends {
    render () {
        return <Child {} />;

This library allows you to create universal interface components using these two functions:

  • render(props, data)
  • createEnhancer(Comp, propName)

First, in your render method use render():

class MyData extends Component {
    render () {
        return render(this.props, data);

Second, create enhancer out of your component:

const withData = createEnhancer(MyData, 'data');



npm i react-universal-interface --save


import {render, createEnhancer} from 'react-universal-interface';


render(props, data)

  • props — props of your component.
  • data — data you want to provide to your users, usually this will be this.state.

createEnhancer(Facc, propName)

  • Facc — FaCC component to use when creating enhancer.
  • propName — prop name to use when injecting FaCC data into a component.

Returns a component enhancer enhancer(Comp, propName, faccProps) that receives three arguments.

  • Comp — required, component to be enhanced.
  • propName — optional, string, name of the injected prop.
  • faccProps — optional, props to provide to the FaCC component.


TypeScript users can add typings to their render-prop components.

import {UniversalProps} from 'react-universal-interface';

interface Props extends UniversalProps<State> {

interface State {

class MyData extends React.Component<Props, State> {


Unlicense — public domain.