npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

react-custom-proptypes

1.1.1 • Public • Published

react-custom-proptypes

npm Build Status dependencies Status

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

install

npm i react-custom-proptypes

Downloadsweekly downloads

326

version

1.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability