streamich / react-universal-interface

Universal Component Interface - FaCC, render prop, component prop, prop injection, HOC, decorator

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!

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.

react-universal-interface's Issues

React Hooks

Add function that transforms a React hook into a universal render-prop.

missing license field in package.json

Currently https://github.com/streamich/react-universal-interface/blob/master/package.json has no license field.

This produces the following output when we run licensee with corrections: true:

[email protected]
  NOT APPROVED
  Terms: Invalid license metadata
  Repository: https://github.com/streamich/react-universal-interface.git
  Homepage: None listed
  Author: None listed
  Contributors: None listed

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Request new feature

Hi, this is really nice interface for React component development. However, I would like to request a new feature allow to pass a props to HOC.

Example:

const child = withData(props)(MyChid);