react-universal-interface
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.2 • Public • Published

    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.

    Install

    npm i react-universal-interface

    DownloadsWeekly Downloads

    643,463

    Version

    0.6.2

    License

    none

    Unpacked Size

    31.4 kB

    Total Files

    32

    Last publish

    Collaborators

    • streamich