JSPM – assign-prop-types@1.0.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

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

assignPropTypes([propTypes], [defaultProps], [contextTypes]) : assigner

Usage

npm i assign-prop-types --S

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

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

Prepare assigner for reuse:

/* reusable-prop-types.js */
export const textualChild = assignPropTypes({
  children: PropTypes.node.isRequired,
});

/* H1.js */
import { textualChildPropTypes } from '../reusable-prop-types';
export default textualChildPropTypes(({ children }) => (<h1>{children}</h1>));

/* H2.js */
import { textualChildPropTypes } from '../reusable-prop-types';
export default textualChildPropTypes(({ children }) => (<h2>{children}</h2>));

Mixin up prop-types:

import { combineAssigners } from 'assign-prop-types';
import { textualChildPropTypes, classNamePropTypes } from '../reusable-prop-types';
export default combineAssigners(
  textualChildPropTypes,
  classNamePropTypes,
)(({ children, className }) => (<h1
  className={className}
>{children}</h1>));

🙆 Mutates!

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

Why?

The code...

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

is more chainable than...

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

Author

Vladimir Kalmykov vladimirmorulus@gmail.com

License

MIT, 2017