
Security News
Vite+ Joins the Push to Consolidate JavaScript Tooling
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
babel-plugin-react-docgen
Advanced tools
react-docgen allows you to write propType descriptions, class descriptions and access propType metadata programatically.
This babel plugin allow you to access those information right inside your React class.
For an example, let's say you've a React class like this:
/**
This is an awesome looking button for React.
*/
import React from 'react';
export default class Button extends React.Component {
render() {
const { label, onClick } = this.props;
return (
<button onClick={onClick}>{ label }</button>
);
}
}
Button.propTypes = {
/**
Label for the button.
*/
label: React.PropTypes.string,
/**
Triggered when clicked on the button.
*/
onClick: React.PropTypes.func,
};
With this babel plugin, you can access all these information right inside your app with:
console.log(Button.__docgenInfo);
{
description: 'This is an awesome looking button for React.',
props: {
label: {
type: {
name: 'string'
},
required: false,
description: 'Label for the button.'
},
onClick: {
type: {
name: 'func'
},
required: false,
description: 'Triggered when clicked on the button.'
}
}
}
This will be pretty useful for documentations and some other React devtools like Storybook.
Install the plugin:
npm install -D babel-plugin-react-docgen
Use it inside your .babelrc
{
"plugins": ["react-docgen"]
}
option | description | default |
---|---|---|
resolver | You may use the 3 built-in react-docgen resolvers by specifying its name as a string , or you may specify a custom resolver by specifying the function explicitly. | "findAllExportedComponentDefinition" |
handlers | All react-docgen handlers are automatically applied. However, custom handlers can be added by specifying them here. Any string value will be loaded by require , and a function will be used directly. | |
removeMethods | Used to remove docgen information about methods. | false |
DOC_GEN_COLLECTION_NAME | The name of a global variable where all docgen information can be stored. See below for more information. | |
...options | Remaining options will be passed directly as react-docgen options. Any options they allowed will be passed through, but the filename will be overwritten by the filename provided by babel. |
Sometimes, it's a pretty good idea to collect all of the docgen info into a collection. Then you could use that to render style guide or similar.
So, we allow you to collect all the docgen info into a global collection. To do that, add following config to when loading this babel plugin:
{
"plugins":[
[
"babel-plugin-react-docgen",
{
"DOC_GEN_COLLECTION_NAME": "MY_REACT_DOCS",
"resolver": "findAllComponentDefinitions", // optional (default: findAllExportedComponentDefinitions)
"removeMethods": true, // optional (default: false)
"handlers": ["react-docgen-deprecation-handler"] // optional array of custom handlers
}
]
]
}
Then you need to create a global variable(an object) in your app called MY_REACT_DOCS
before any code get's executed.
Then we'll save them into that object. We do it by adding a code block like this to the transpiled file:
if (typeof MY_REACT_DOCS !== 'undefined') {
MY_REACT_DOCS['test/fixtures/case4/actual.js'] = {
name: 'Button',
docgenInfo: Button.__docgenInfo,
path: 'path/to/my/button.js'
};
}
We parse your code with react-docgen
to get this info, but we only do it for files which contain a React component.
There will be some overhead to your project, but you can leverage babel's cache directory to avoid this a huge performance hit.
Yes this increase the output size of your transpiled files. The size increase varies depending on various factors like:
Most of the time, you need this plugin when you are developing your app or with another tool like Storybook. So, you may not need to use this on the production version of your app.
v4.2.1
13-10-2020
Bug fixes:
react-docgen is the underlying library used by babel-plugin-react-docgen. It parses React component files to extract prop types and descriptions. While babel-plugin-react-docgen integrates with Babel to perform this extraction during the build process, react-docgen can be used standalone or integrated into other build tools and scripts.
prop-types-docs is another tool that can be used to generate documentation from prop types. It differs from babel-plugin-react-docgen in that it is not a Babel plugin and may require separate integration into the build process. It provides a CLI to generate markdown documentation from prop types.
storybook-addon-react-docgen is an addon for Storybook that uses react-docgen to extract and display prop types information within Storybook stories. It enhances the Storybook experience by providing prop tables and documentation automatically. It is similar to babel-plugin-react-docgen in that it uses react-docgen, but it is specifically tailored for use with Storybook.
FAQs
Babel plugin to add react-docgen info into your code
The npm package babel-plugin-react-docgen receives a total of 806,785 weekly downloads. As such, babel-plugin-react-docgen popularity was classified as popular.
We found that babel-plugin-react-docgen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
Security News
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.