Socket
Socket
Sign inDemoInstall

react-universal-interface

Package Overview
Dependencies
4
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-universal-interface

Universal Children Definition for React Components


Version published
Maintainers
1
Weekly downloads
1,360,401
decreased by-5.03%

Weekly downloads

Readme

Source

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.

Keywords

FAQs

Last updated on 29 May 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc