JSPM – assign-prop-types@1.2.3

Package Exports

assign-prop-types

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (assign-prop-types) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

assign-prop-types

Allows you to create stateless React components with assigned propTypes (and defaultProps & contextTypes) without breaking the chain.

export default assignPropTypes(
  // propTypes
  {
    selector: PropTypes.func,
  },
  // defaultProps
  {
    selector: () => 'No selector passed'
  },
  // contextTypes
  {
    store: PropTypes.object
  }
)(({ selector }, { store }) => (
  <div>{selector(store.getState())}</div>
));

Install

Yarn:

yarn add assign-prop-types

Npm:

npm install assign-prop-types --S

Import

import assignPropTypes from 'assign-prop-types';

In most cases, you will also need to import packages react and prop-types (or React.PropTypes for React < v15.5).

import React from 'react';
import PropTypes from 'prop-types';
import assignPropTypes from 'assign-prop-types';

Usage

The function assignPropTypes accepts optional parameters [propTypes], [defaultProp], [contextTypes] and returns function, called assigner, which, in turn, accepts React component and returns component, mutaded with passed properties.

export default assignPropTypes({
  children: PropTypes.node.isRequired,
})(({ children }) => (<div>{children}</div>));

Identical to:

const Component = ({ children }) => (<div>{children}</div>);
Component.propTypes = {
  children: PropTypes.node.isRequired,
};
export default Component;

Reusable assigner

Assigners can be prepared in advance:

const assignUsualTypes = assignPropTypes({
  children: PropTypes.node,
}, {
  children: "No children specified"
});

And applied later multiple times:

export const H1 = assignUsualTypes(({ children }) => (<h1>{children}</h1>));
export const H2 = assignUsualTypes(({ children }) => (<h2>{children}</h2>));

Extending

Assigners can be extended. To extend assigner, just call it with advanced configuration:

const usualPropTypes = assignPropTypes({
  children: PropTypes.node.isRequired,
});
export default usualPropTypes({
  title: PropTypes.string,
})(YourComponent);

// propTypes will be { children, title }

Or by passing another assigner(s) to combine them:

import assignerA from './assignerA';
import assignerB from './assignerB';
import assignerC from './assignerC';

export default assignPropTypes(
  assignerA,
  assignerB,
  assignerC
)(YourComponent);

👾 Mutates!

Target component will be mutated. Keep this fact in your mind.

Author

Vladimir Kalmykov vladimirmorulus@gmail.com

License

MIT, 2017