Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
react-universal-interface
Advanced tools
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,178,015 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.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.