# react-docgen-external-proptypes-handler

> evaluate variables from external files for react-docgen

Latest version **2.0.0** (published 2019-10-16) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-docgen-external-proptypes-handler
pnpm add react-docgen-external-proptypes-handler
yarn add react-docgen-external-proptypes-handler
bun add react-docgen-external-proptypes-handler
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-10-16 |
| First published | 2018-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.2.0 |
| Dependencies | 1 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Author | siddharthkp |
| Maintainers | siddharthkp |

## Links

- npm: https://www.npmjs.com/package/react-docgen-external-proptypes-handler
- Repository: https://github.com/siddharthkp/react-docgen-external-proptypes-handler
- Homepage: https://github.com/siddharthkp/react-docgen-external-proptypes-handler#readme
- Issues: https://github.com/siddharthkp/react-docgen-external-proptypes-handler/issues
- npm.io page: https://npm.io/package/react-docgen-external-proptypes-handler

## Dependencies (1)

- [recast](https://npm.io/package/recast.md) ^0.17.3

## Recent versions

- 2.0.0 (latest) — 2019-10-16
- 1.0.3 — 2019-06-06
- 1.0.2 — 2018-12-14
- 1.0.1 — 2018-12-13
- 1.0.0 — 2018-05-11

## README

# react-docgen-external-proptypes-handler
 > Evaluate variables from external files for react-docgen</b>
 
**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](https://github.com/pasupuletics) for sharing the implementation and [Daniel Tschinder](https://github.com/danez) for maintaining it.

#### problem

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

Example:

```js
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

```json
"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:

```jsx
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.

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

&nbsp;

#### Usage

```js
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`)
```js
module.export = {
  handlers: componentPath =>
    require('react-docgen').defaultHandlers.concat(
        require('react-docgen-external-proptypes-handler')(componentPath),
        require('react-docgen-displayname-handler').createDisplayNameHandler(componentPath)
      )
}
```

&nbsp;

#### like it?

:star: this repo

#### license

MIT © [siddharthkp](https://github.com/siddharthkp)

---
_Source: https://npm.io/package/react-docgen-external-proptypes-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._