react-provide-props 3.0.1 • Public • Published 7 years ago react-provide-props
Create react higher-order components (providers) simply. For what is this?
You can simply provide for example react-router to your components as high-order component.
That means you can avoid using context. Your new provider will update props of the component.
Example
Create provider
import { PropTypes } from ' react ' ;
import createProvider from ' react-provide-props ' ;
const provider = createProvider ( ' PlaceholderProvider ' , ( props , context ) => ( {
placeholder : ` What is your favorite color ${ props . name } ? ` ,
} ) , {
placeholder : PropTypes . string ,
} ) ;
export default provider ;
Extend your component
import React , { Component } from ' react ' ;
import placeholderProvider from ' ./placeholderProvider ' ;
function MyComponent ( props ) {
return (
< input type = " text " placeholder = { props . placeholder } / >
) ;
}
export default placeholderProvider ( MyComponent ) ;
Extend your component with ES7 decorator
import React , { Component } from ' react ' ;
import placeholderProvider from ' ./placeholderProvider ' ;
@placeholderProvider
export default class MyComponent extends Component {
render ( ) {
return (
< input type = " text " placeholder = { this . props . placeholder } / >
) ;
}
}
Use your component
import React , { Component } from ' react ' ;
import MyComponent from ' ./MyComponent ' ;
function MyComponent ( props ) {
return (
< MyComponent name = " Zlatko " / >
) ;
}
The result will be
< input type = " text " placeholder = " What is your favorite color Zlatko " />
/react-provide-props/ / react-provide-props /
Package Sidebar Install npm i react-provide-props
Downloads Weekly Downloads