Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-universal-interface
Advanced tools
Universal Children Definition for React Components
Weekly downloads
Readme
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!
npm i react-universal-interface --save
import {render, createEnhancer} from 'react-universal-interface';
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 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> {
}
Unlicense — public domain.
FAQs
Universal Children Definition for React Components
The npm package react-universal-interface receives a total of 1,120,870 weekly downloads. As such, react-universal-interface popularity was classified as popular.
We found that react-universal-interface demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.