Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@hh.ru/babel-plugin-react-docgen
Advanced tools
Readme
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 | react-docgen has 3 built in resolvers which may be used. Resolvers define how/what the doc generator will inspect. You may inspect the existing resolvers in react-docgen/tree/master/src/resolver. | "findAllExportedComponentDefinition" |
removeMethods | optionally remove docgen information about methods | false |
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 (use the string name of the package in the array)
}
]
]
}
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'
};
}
Now, we parse your code with react-docgen
to get these info.
But we only do it for files which has a React component.
Yes, this will add some overhead to your project. But once you turned on babel cache directory this won't be a big issue.
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.
FAQs
Babel plugin to add react-docgen info into your code
We found that @hh.ru/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 11 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).