How can I implement custom validation in React PropTypes?

How can I implement custom validation in React PropTypes?

You can create custom validation functions for PropTypes by defining a function that checks the prop value and returns an error if it doesn't meet your criteria.

Can you show me an example of a custom validation function?

Sure! Here's a simple example:

import PropTypes from 'prop-types';

const customPropType = (props, propName, componentName) => {
  if (!/^[a-zA-Z]+$/.test(props[propName])) {
    return new Error(`Invalid prop \\`${propName}\
` supplied to \\`${componentName}\
`. Must be a string with only letters.`);
  }
};

MyComponent.propTypes = {
  name: customPropType,
};

What happens if the validation fails?

If the validation fails, React will log a warning in the console indicating the prop type error, helping you identify the issue.

Can I use multiple custom validations for a single prop?

Yes, you can chain multiple validation functions or create a composite function that checks for various conditions.