1.1.2 • Published 4 years ago
inject-props v1.1.2
inject-props
A helper React HOC to pass any props to a component.
Installation
# npm
npm install inject-props
# yarn
yarn add inject-propsExample
import { injectProps } from 'inject-props'
import React from 'react'
const Message = ({ className, text }) => (
<div className={className}>
{text}
</div>
)
const ErrorMessage = injectProps({ className: 'errorMessage' })(Message)
<ErrorMessage text="Error!" />
// → <MyComponent className="errorMessage" text="Error!" />
const MessageByType = injectProps(
props => ({
className: props.type === 'error' ? 'errorMessage' : '',
}),
)(Message)
<MessageByType type="error" text="Error!" />
// → <MyComponent className="errorMessage" text="Error!" />
<MessageByType type="generic" text="Error!" />
// → <MyComponent className="" text="Error!" />API
injectProps(props[, mergeProps]): Component => WrapperComponent
A helper HOC to pass any props to a component.
| Argument | Type | Description |
|---|---|---|
props | object | props => object | A set of props to forward to the component; or, a function which receives the props passed to the component and returns a set of props to forward to the component. |
mergeProps | (injectedProps, ownProps) => object | A function used to merge the props provided by the HOC with the props passed to the wrapped component. Defaults to (injectedProps, ownProps) => ({ ...ownProps, ...injectedProps }). |
Component | ReactComponent | The component to wrap. |
const MyConnectedComponent = injectProps({ foo: 'bar' })(MyComponent)
<MyConnectedComponent x={1} y={2} />
// → <MyComponent x={1} y={2} foo="bar" />const MyConnectedComponent = injectProps(
props => ({ foo: props.x + props.y }),
)(MyComponent)
<MyConnectedComponent x={1} y={2} />
// → <MyComponent x={1} y={2} foo={3} />const MyConnectedComponent = injectProps(
props => ({ foo: props.x + props.y }),
(injectedProps, ownProps) => injectedProps,
)(MyComponent)
<MyConnectedComponent x={1} y={2} />
// → <MyComponent foo={3} />