jsx-html-class

Babel plugin to allow the use of "class" instead of "className" in JSX

Motivation

React.js requires we use the attribute className instead of the traditional class in JSX elements.

class MyComponent extends React.Component {
  render() {
    return <div className="container">Hello world</div>;
  }
}

If you are human, you've forgotten this at least once. If you're like me, you forget this all the time. Fortunately, React warns us...

Warning: Unknown DOM property class. Did you mean className?

However, considering we are already transpiling this code with Babel, why not just convert class to className and never think about this again?

This is especially useful if you are lucky enough to have designers writing JSX or you often copy & paste HTML into your React components.

npm install --save-dev jsx-html-class

babel --plugins jsx-html-class script.js

{
  "plugins": ["jsx-html-class"]
}

browserify({
  // etc etc
  transform: [
    babelify.configure({
      plugins: ["jsx-html-class"]
    })
  ]
});

Now you can freely use either class or className and safely ensure your HTML classes will be properly rendered.

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
README.md		README.md
index.js		index.js
package.json		package.json