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

createPropType

Syntax

createPropType(callback[, description])

Parameters

`callback` : function

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

`description` : string

Optional. Use this value to specify a helpful description.

Usage

import React from 'react';
import { createPropType } from 'react-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',
  'Must be `spades`, `hearts`, `diamonds`, or `clubs`.'
);

const valuePropType = createPropType(
  prop =>
    Number.isInteger(prop) &&
    prop >= 1 &&
    prop <= 12,
  'Must be an integer from 1 - 12.'
);

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

export default Card;

createIteratorPropType

Syntax

createIteratorPropType(callback[, description])

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.

`description` : string

Optional. Use this value to specify a helpful description.

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