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

import{render}from'react-universal-interface';classMyDataextendsReact.Component{render(){returnrender(this.props,this.state);}}

Now you can use it:

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

Use this badge if you support universal interface:

[![React Universal Interface](https://img.shields.io/badge/React-Universal%20Interface-green.svg)](https://github.com/streamich/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)<MyData>{(data)=><Child{...data}/>}</MyData>// Render prop<MyDatarender={(data)=><Child{...data}/>}/>// Component prop<MyDatacomponent={Child}/><MyDatacomp={Child}/>// Prop injection<MyData><Child/></MyData>// Higher Order Component (HOC)constChildWithData=withData(Child);// Decorator @withDataclassChildWithDataextends{render(){return<Child{...this.props.data}/>;}}

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

classMyDataextendsComponent{render(){returnrender(this.props,data);}}

Second, create enhancer out of your component:

constwithData=createEnhancer(MyData,'data');

Done!

npm i react-universal-interface --save 

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

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

• 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';interfacePropsextendsUniversalProps<State>{}interfaceState{}classMyDataextendsReact.Component<Props,State>{}

Unlicense — public domain.