Package Exports

prop-types-docs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prop-types-docs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

prop-types-docs

Document your prop types!

API Documentation

Installation

yarn add prop-types-docs

npm install prop-types-docs

Given the following component:

const MyComponent = ({ name, age, contacts }) => {
  <div>
    name: {name}
    age: {age}
    contacts: {contacts.map(() => ...)}
  </div>
}

We can document our props:

import PropTypes, { withPropDocs } from 'prop-types-docs'

export default withPropDocs({
  name: 'MyComponent', // optional
  props: {
    name: {
      type: PropTypes.string,
      required: true,
      description: "The user's name",
    },
    age: {
      type: PropTypes.number,
      required: true,
      description: "The user's age",
    },
    contacts: {
      type: PropTypes.array,
      default: [],
      description: 'A list of contacts',
    },
  },
})(MyComponent)

Which is the equivalent of:

import PropTypes from 'prop-types'

MyComponent.displayName = 'MyComponent'

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  contacts: PropTypes.array,
}

MyComponent.defaultProps = {
  contacts: [],
}

Notes

prop-types-docs is not a higher order component. It simply assigns the .propTypes and .defaultProps on the provided component. This also allows it to be used anywhere in a compose chain.
In addition to setting the prop types, it also stores the props meta object on the .propInfo key on the provided component.

Todo

Better support for complex proptypes, e.g. arrayOf(shape()).