react-docgen-external-proptypes-handler

react-docgen-external-proptypes-handler

Evaluate variables from external files for react-docgen

This handler does not work with react-docgen >= 5.0.0-beta.1 (yet). react-docgen as of this version will most probably include this functionality by default

credit

All credit goes to Chandrasekhar Pasupuleti for sharing the implementation and Daniel Tschinder for maintaining it.

problem

react-docgen doesn't allow you to use variables from other files to use in propTypes

Example:

import iconNames from './icon-names.js'

Icon.propTypes = {
  /** Icon name */
  name: PropTypes.oneOf(iconNames).isRequired
}

This doesn't work because it's parsed as a string and not an array

"props": {
  "name": {
    "type": {
      "name": "enum",
      "computed": true,
      "value": "iconNames"
    },
    "required": true,
    "description": "Icon name"
  },
}

install

npm i react-docgen-external-proptypes-handler --save-dev

convention

If you are importing a variable from an external file to use in propTypes, like in the example below, you need to follow a very specific convention to make it work.

Component code:

import React from 'react'
import PropTypes from 'prop-types'

/* importing variable iconNames from .js file (js, jsx are supported, json is not) */
import iconNames from './icon-names.js'

const Icon = props => {
  /*implementation logic*/
}

Icon.propTypes = {
  /** Icon name */
  name: PropTypes.oneOf(iconNames).isRequired
}

export default Icon

In the imported file, make sure the same variable is exported.

const iconNames = ['copy', 'trash', 'etc']
/* same variable name */
export default iconNames

 

Usage

const docgen = require('react-docgen')
const externalProptypesHandler = require('./react-docgen-external-proptypes-handler')

let metadata = files.map(path => {
  /* append display name handler to handlers list */
  const handlers = docgen.defaultHandlers.concat(externalProptypesHandler(path))

  /* read file to get source code */
  const code = fs.readFileSync(path, 'utf8')

  /* parse the component code to get metadata */
  const data = docgen.parse(code, null, handlers)

  return data
})

Usage with react-styleguidist

Enable handlers property in styleguidist config(styleguidist.config.js)

module.export = {
  handlers: componentPath =>
    require('react-docgen').defaultHandlers.concat(
        require('react-docgen-external-proptypes-handler')(componentPath),
        require('react-docgen-displayname-handler').createDisplayNameHandler(componentPath)
      )
}

 

like it?

:star: this repo

license

MIT © siddharthkp