streamich/react-universal-interface


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

License: Unlicense

Language: TypeScript


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} />

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

Project Statistics

Sourcerank 9
Repository Size 33.2 KB
Stars 34
Forks 1
Watchers 1
Open issues 2
Dependencies 24
Contributors 2
Tags 10
Created
Last updated
Last pushed

Top Contributors See all

Vadim Dalecky Simo Aleksandrov

Packages Referencing this Repo

react-universal-interface
Universal Children Definition for React Components
Latest release 0.6.0 - Updated - 34 stars

Recent Tags See all

v0.6.0 April 08, 2019
v0.5.2 February 09, 2019
v0.5.1 December 12, 2018
v0.5.0 October 21, 2018
v0.4.0 October 20, 2018
v0.3.2 March 26, 2018
v0.3.1 February 20, 2018
v0.3.0 February 20, 2018
v0.2.0 February 19, 2018
v0.1.0 February 19, 2018

Something wrong with this page? Make a suggestion

Last synced: 2019-04-08 15:53:45 UTC

Login to resync this repository