react-universal-interface

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 ChildWitData = 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!

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.

License

Unlicense — public domain.