What are advanced techniques for using PropTypes in React?

What are advanced techniques for using PropTypes in React?

Advanced techniques for using PropTypes include custom validators, combining PropTypes, and using PropTypes with TypeScript.

Can you give an example of a custom validator?

Sure! A custom validator can check if a prop is a specific type or meets certain criteria. For example:

import PropTypes from 'prop-types';

const customValidator = (props, propName, componentName) => {
  if (!/^[A-Z]/.test(props[propName])) {
    return new Error(`Invalid prop \\`${propName}\ supplied to \\`${componentName}\. Must start with an uppercase letter.`);
  }
};

MyComponent.propTypes = {
  myProp: customValidator,
};

How can I combine multiple PropTypes?

You can combine multiple PropTypes using the PropTypes.oneOfType method. For example:

MyComponent.propTypes = {
  myProp: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
};

Is it possible to use PropTypes with TypeScript?

Yes, you can use PropTypes with TypeScript, but it's often better to use TypeScript's type system for type checking instead.