Custom React PropType validators that we use at Airbnb.
JavaScript Shell
Latest commit 25d7137 Jan 10, 2017 @ljharb ljharb v2.0.0

README.md

prop-types Version Badge

Build Status dependency status dev dependency status License Downloads

npm badge

Custom React PropType validators that we use at Airbnb. Use of airbnb-js-shims or the equivalent is assumed.

  • and: ensure that all provided propType validators pass
  • childrenHavePropXorChildren: ensure that either all children have the indicated prop, all children have children, or all children have neither.
  • childrenOfType: restrict the prop to only allow children of the given type.
  • componentWithName: restrict the prop to only allow a component with a certain name/displayName.
  • forbidExtraProps: pass your entire propTypes object into this function, and any nonspecified prop will error.
  • mutuallyExclusiveProps: provide a propType, and a list of props, and only one prop out of the list will be permitted, validated by the given propType.
  • nChildren: require a specific amount of children.
  • nonNegativeInteger: require that the prop be a number, that is 0, or a positive integer.
  • or: recursively allows only the provided propTypes, or arrays of those propTypes.
  • range: provide a min, and a max, and the prop must be a number in the range [min, max)
  • restrictedProp: this prop is not permitted to be anything but null or undefined.
  • uniqueArray: this prop must be an array, and all values must be unique (determined by Object.is). Like PropTypes.array, but with uniqueness.
  • uniqueArrayOf: uniqueArray, with a type validator applied. Like PropTypes.arrayOf, but with uniqueness.
  • withShape: takes a PropType and a shape, and allows a shape to be enforced on any non-null/undefined value.

Production

Since PropTypes are typically not included in production builds of React, this library’s functionality serves no useful purpose. As such, when the NODE_ENV environment variable is "production", instead of exporting the implementations of all these prop types, we export mock functions - in other words, something that ensures that no exceptions are thrown, but does no validation. When environment variables are inlined (via a browserify transform or webpack plugin), then tools like webpack or uglify are able to determine that only the mocks will be imported - and can avoid including the entire implementations in the final bundle that is sent to the browser. This allows for a much smaller ultimate file size, and faster in-browser performance, without sacrificing the benefits of PropTypes themselves.

Tests

Simply clone the repo, npm install, and run npm test