npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@larsbs/babel-plugin-react-docgen

v2.0.0-rc.1

Published

Babel plugin to add react-docgen info into your code

Downloads

10

Readme

babel-plugin-react-docgen

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.

Usage

Install the plugin:

npm install -D babel-plugin-react-docgen

Use it inside your .babelrc

{
  "plugins": ["react-docgen"]
}

.babelrc Options

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

Collect All Docgen Info

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: findAllComponentDefinitions)
        "removeMethods": true // optional (default: false)
      }
    ]
  ]
}

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'
  };
}

Compile Performance

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.

Output Size

Yes this increase the output size of your transpiled files. The size increase varies depending on various factors like:

  • How many react classes you've
  • Amount of docs you've written
  • Amount of propTypes you've

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.