map-props
map-props
wraps a React component and allows mapping prop values passed in to other prop values expected by
the wrapped component.
Installation
npm install --save map-props
Release Notes
This project follows SemVer and each release is posted on the Release Notes page.
Example
;; static propTypes = firstName: PropTypesstringisRequired lastName: PropTypesstringisRequired { const firstName lastName = thisprops; return <div className="user-profile">firstName lastName</div>; } // wrap this component to create a component that expects only a fullName propUserProfile = UserProfile; ;
Then render this component:
<UserProfile fullName="Bobby Tables"/>
Benefits
By mapping props using a Higher Order Component, you can increase the reusability of other "dumb" (pure and stateless) components.
Complimentary
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.
ES7 Decorator Sugar
Using ES7 decorator proposal, the example above could be written as:
@
You can enable ES7 decorators with Babel Stage 1. Note that decorators are experimental, and this syntax might change or be removed later.
API
mapProps(mapping:Object)
mapping : Object
-a mapping from
propName
to a function that takes all the props and produces the value to pass to the wrapped component aspropName
.
This is an extremely young library, so the API may change. Comments and feedback welcome.