title: React PropTypes: Require array to have at least one element
body: <p>I'm using the <a href="https://www.npmjs.com/package/prop-types" rel="noreferrer">prop-types</a> library in my React application and have the following situation:</p>
  
  <pre><code>MyComponent.propTypes = {
    foo: PropTypes.arrayOf(
      PropTypes.shape({
        bar: PropTypes.string.isRequired,
        baz: PropTypes.number.isRequired,
      })
    ).isRequired
  }
  </code></pre>
  
  <p>By setting <code>isRequired</code> on <code>foo</code>, <code>foo</code> must be an array (not null/undefined). However, it is still allowed to be an empty array. In my case, <strong>I'd like to require the array to contain at least one element.</strong></p>
  
  <p>This is possible with a custom validator function:</p>
  
  <pre><code>MyComponent.propTypes = {
    foo: function (props, propName, componentName) {
      const val = props[propName]
      if (!Array.isArray(val)) return new Error(`${propName} must be an array`)
      if (val.length === 0) return new Error(`${propName} must have at least one element`)
  
      val.forEach(function (elem) {
        if (typeof elem.bar !== 'string') return new Error(`${propName}.bar must be a string`)
        if (typeof elem.baz !== 'number') return new Error(`${propName}.baz must be a number`)
      })
    }
  }
  </code></pre>
  
  <p>However, it isn't pretty, and feels like it could quickly get more complicated if the array contained larger + more complex objects.</p>
  
  <p>Is there a cleaner way to achieve this?</p>