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

babel-plugin-transform-react-remove-statics

v0.0.5

Published

Remove unnecessary statics attached to React components for different build environments

Downloads

10

Readme

Babel Plugin for removing statics from React components

Remove unnecessary statics attached to React components for different build environments

Usage

Set the statics you want via babel configuration with boolean.

This can be particularly useful if you want to switch certain statics on/off for certain environments. An example of this would be using something like react-styleguide-generator-alt for your documentation. Since that tool requires you to attach a static styleguide to your components, you probably would want to remove it in production. But you would probably want to keep it to actually build your doc server, and then remove PropTypes still. This babel plugin gives you that flexibility.

Via .babelrc (Recommended)

Simply pass in the name of the static you want removed during build and set a boolean. If true, the static will be removed, if false, the static will stay attached to the component.

.babelrc

{
  "env": {
    "production": {
      "plugins": [
        ["transform-react-remove-statics", {
          "propTypes": true
        }]
      ]
    }
  }
}

Via Node API

require("babel-core").transform("code", {
  plugins: [
    ["transform-react-remove-statics", {
      "propTypes": true
    }]
  ]
});

Example Removing PropTypes

Using a configuration like we showed above, we can remove PropTypes from React Components.

In

const Foo = React.createClass({
  propTypes: {
    foo: React.PropTypes.string
  }
});

Out

const Foo = React.createClass({});

Installation

$ npm install --save-dev babel-plugin-transform-react-remove-statics

#License

MIT

Thanks

This project was originally a fork of Babel Plugin Transform React Remove PropTypes, by oliviertassinari, which is in turn a fork of Babel Plugin React Remove PropTypes by nkt.

Thank you nkt and oliviertassinari for letting me stand on your shoulders.