react-universal-interface
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:
[![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:
<MyData>{
(data) => <Child {...data} />
}</MyData>
<MyData render={
(data) => <Child {...data} />
} />
<MyData component={Child} />
<MyData comp={Child} />
<MyData>
<Child />
</MyData>
const ChildWithData = withData(Child);
@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!
Installation
npm i react-universal-interface --save
Usage
import {render, createEnhancer} from 'react-universal-interface';
Reference
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
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> {
}
License
Unlicense — public domain.