A higher order component to map React props

Downloads in past


45271.0.09 years ago9 years agoMinified + gzip package size for map-props in KB



NPM Version NPM Downloads Build Status devDependency Status
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

Release Notes

This project follows SemVer and each release is posted on the Release Notes page.


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 <div className="user-profile">{firstName} {lastName}</div>;

// 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]

export default UserProfile;

Then render this component:
<UserProfile fullName="Bobby Tables"/>


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.

ES7 Decorator Sugar

Using ES7 decorator proposal, the example above could be written as:
  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 pass
to the wrapped component as propName.
This is an extremely young library, so the API may change. Comments and feedback welcome.