A higher order component to map React props
npm install map-props#map-props
---
map-props wraps a React component and allows mapping prop values passed in to other prop values expected by
the wrapped component.
---
``
npm install --save map-props
This project follows SemVer and each release is posted on the
Release Notes page.
`javascript
import React, {Component, PropTypes} from 'react';
import mapProps from 'map-props';
class UserProfile extends Component {
static propTypes = {
firstName: PropTypes.string.isRequired,
lastName: PropTypes.string.isRequired
}
render() {
const {firstName, lastName} = this.props;
return
// wrap this component to create a component that expects only a fullName prop
UserProfile = mapProps({
firstName: props => props.fullName.split(' ')[0],
lastName: props => props.fullName.split(' ')[1]
})(UserProfile);
export default UserProfile;
`
Then render this component:
`javascript`
By mapping props using a Higher Order Component, you can increase the reusability of other "dumb"
(pure and stateless) components.
This library was inspired by, and intended to be used in conjunction with redux,
reselect and redux-form,
although it does not depend on any of those libraries and can be used in any React-based project.
Using ES7 decorator proposal, the example above
could be written as:
`javascript`
@mapProps({
firstName: props => props.fullName.split(' ')[0],
lastName: props => props.fullName.split(' ')[1]
})
export default class UserProfile extends Component {
You can enable ES7 decorators with Babel Stage 1. Note
that decorators are experimental, and this syntax might change or be removed later.
##### -mapping : Object
> a mapping from propName to a function that takes all the props and produces the value to passpropName`.
to the wrapped component as
This is an extremely young library, so the API may change. Comments and feedback welcome.