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>
<MyData comp={MyChild} />
<MyData component={MyChild} />
Use this badge if you support universal interface:
[](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
<MyData render={
(data) => <Child {...data} />
} />
// Component prop
<MyData component={Child} />
<MyData comp={Child} />
// Prop injection
<MyData>
<Child />
</MyData>
// Higher Order Component (HOC)
const ChildWithData = withData(Child);
// Decorator
@withData
class ChildWithData extends {
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():
class MyData extends Component {
render () {
return render(this.props, data);
}
}Second, create enhancer out of your component:
const withData = 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 bethis.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';
interface Props extends UniversalProps<State> {
}
interface State {
}
class MyData extends React.Component<Props, State> {
}Unlicense — public domain.