$ npm install 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:
// 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';
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.
© 2010 - cnpmjs.org x YWFE | Home | YWFE