JSPM – react-custom-proptypes@1.0.2

Package Exports

react-custom-proptypes

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 (react-custom-proptypes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

#react-custom-proptypes

React Custom PropTypes exposes a simple API for creating precisely defined, dependency-free, and chainable React PropType validators.

Check out the examples for various use cases.

##Installation

$ npm install react react-dom react-custom-proptypes --save

##API ###createPropType ###Syntax

createPropType(callback[, message])

###Parameters #####callback : function Function that returns a boolean representing the validation of the proptype, taking a single argument: prop, the value of the prop

#####message : string Optional. Use this value to specify a custom error message.

###Usage

import React from 'react';
import { createPropType } from './../../lib/custom-proptypes';

const Card = props => (
  <div>
    <div>{props.suit}</div>
    <div>{props.value}</div>
  </div>
);

const suitPropType = createPropType(
  prop =>
    prop === 'spades' ||
    prop === 'hearts' ||
    prop === 'diamonds' ||
    prop === 'clubs',
  'Invalid prop `suit`: must be `spades`, `hearts`, `diamonds`, or `clubs`.'
);

const valuePropType = createPropType(
  prop =>
    Number.isInteger(prop) &&
    prop >= 1 &&
    prop <= 12,
  'Invalid prop `value`: must be an integer from 1 - 12.'
);

Card.propTypes = {
  suit: suitPropType.isRequired,
  value: valuePropType.isRequired
};

export default Card;

###createIteratorPropType ###Syntax

createIteratorPropType(callback[, message])

###Parameters #####callback : function Function that returns a boolean representing the validation of the proptype, taking two arguments:

prop - the value of the prop
key - the key of the current element being processed in the iterable object.

#####message : string Optional. Use this value to specify a custom error message.

###Usage

import React, { PropTypes } from 'react';
import { createIteratorPropType } from 'react-custom-proptypes';

const TweetFeed = props => (
  <div>
    {props.tweets.map((tweet, index) => (
      <div key={index}>{tweet}</div>
    ))}
  </div>
);

TweetFeed.propTypes = {
  tweets: PropTypes.arrayOf(createIteratorPropType(
    prop => typeof prop === 'string' && prop.length < 140
  )).isRequired
};

export default TweetFeed;

##Contributing Issues and pull requests are welcome.

$ git clone https://github.com/jackrzhang/react-custom-proptypes
$ cd react-custom-proptypes
$ npm install

Please run linting and tests prior to commits.

$ npm run lint
$ npm test

##License MIT