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:
IconpropTypes = /** Icon name */ name: PropTypesisRequired
This doesn't work because it's parsed as a string and not an array
"props":
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 = { /*implementation logic*/} IconpropTypes = /** Icon name */ name: PropTypesisRequired
In the imported file, make sure the same variable is exported.
const iconNames = 'copy' 'trash' 'etc'/* same variable name */
Usage
const docgen = const externalProptypesHandler = let metadata = files
Usage with react-styleguidist
Enable handlers
property in styleguidist config(styleguidist.config.js
)
moduleexport = defaultHandlers
like it?
⭐️ this repo
license
MIT © siddharthkp