react-custom-proptypes
v1.1.1
Published
Simple, precise, and chainable React Custom PropTypes.
Downloads
2,675
Maintainers
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 propkey
- 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