prop-types-docs

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()).