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 passchildrenHavePropXorChildren
: 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.explicitNull
: only allownull
orundefined
/omission - and onlynull
when required.forbidExtraProps
: pass your entirepropTypes
object into this function, and any nonspecified prop will error.integer
: require the prop be an integer.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.mutuallyExclusiveTrueProps
: provide a list of props, and all must be booleans, and only one is allowed to be true.nChildren
: require a specific amount of children.nonNegativeInteger
: require that the prop be a number, that is 0, or a positive integer.numericString
: require the prop be a string that is conceptually numeric.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 butnull
orundefined
.uniqueArray
: this prop must be an array, and all values must be unique (determined byObject.is
). LikePropTypes.array
, but with uniqueness.uniqueArrayOf
:uniqueArray
, with a type validator applied. LikePropTypes.arrayOf
, but with uniqueness.withShape
: takes a PropType and a shape, and allows a shape to be enforced on any non-null/undefined value.
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.
Simply clone the repo, npm install
, and run npm test