react prop-types: reusable validator from existing prop-types

Question

When it comes to using prop-types in React, is there a way to create reusable validators from existing validators

---

Example: validating a "header" object where a header has a title and an icon:

Component.propTypes = {
  header: PropTypes.shape({
    title: PropTypes.string.isRequired,
    icon: PropTypes.element,
  })
}

---

instead of repeating this as the prop gets passed down a chain of components, can we write a reusable isHeader function

Component.propTypes = {
  header: isHeader
}

Answer 1

You should be able to create your reusable type like this:

const myReusableHeader = PropTypes.shape({
  title: PropTypes.string.isRequired,
  icon: PropTypes.element,
})

And then you can use it in your components like this:

Component.propTypes = {
  header: myReusableHeader
}