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.

Installation

npm install --save map-props

Release Notes

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

Example

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]
})(UserProfile);

export default 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:

@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.

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 as propName.

This is an extremely young library, so the API may change. Comments and feedback welcome.