react-universal-interface

Easily create a component which is render-prop, Function-as-a-child and component-prop.

``js
import {render} from 'react-universal-interface';

class MyData extends React.Component {
render () {
return render(this.props, this.state);
}
}
`

Now you can use it:

`jsx


} />

{(state) =>

}



`

---

[![][npm-badge]][npm-url] [![][travis-badge]][travis-url] ![React Universal Interface](https://github.com/streamich/react-universal-interface)

Use this badge if you support universal interface:







`
![React Universal Interface](https://github.com/streamich/react-universal-interface)
`


---


Given a component, it is said to follow universal component interface if, and only if, it supports
all the below usage patterns:

`jsx
// Function as a Child Component (FaCC)
{
(data) =>
}

// Render prop
(data) =>
} />

// Component prop



// Prop injection




// Higher Order Component (HOC)
const ChildWithData = withData(Child);

// Decorator
@withData
class ChildWithData extends {
render () {
return ;
}
}
`

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():

`js
class MyData extends Component {
render () {
return render(this.props, data);
}
}
`

Second, create enhancer out of your component:

`js
const withData = createEnhancer(MyData, 'data');
`

Done!

Installation

npm i react-universal-interface --save

Usage

`js
import {render, createEnhancer} from 'react-universal-interface';
`

Reference

$3

- props — props of your component.
- data — data you want to provide to your users, usually this will be this.state.

$3

- 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.

`ts
import {UniversalProps} from 'react-universal-interface';

interface Props extends UniversalProps {
}

interface State {
}

class MyData extends React.Component {
}
``

License

Unlicense — public domain.

[npm-url]: https://www.npmjs.com/package/react-universal-interface
[npm-badge]: https://img.shields.io/npm/v/react-universal-interface.svg
[travis-url]: https://travis-ci.org/streamich/react-universal-interface
[travis-badge]: https://travis-ci.org/streamich/react-universal-interface.svg?branch=master