├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # jsx-html-class
 2 | [Babel](https://babeljs.io/) plugin to allow the use of "class" instead of "className" in JSX
 3 | 
 4 | https://www.npmjs.com/package/jsx-html-class
 5 | 
 6 | ## Motivation
 7 | 
 8 | React.js requires we use the attribute `className` instead of the traditional `class` in JSX elements.
 9 | 
10 | ```javascript
11 | class MyComponent extends React.Component {
12 |   render() {
13 |     return <div className="container">Hello world</div>;
14 |   }
15 | }
16 | ```
17 | 
18 | 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...
19 | 
20 | > Warning: Unknown DOM property class. Did you mean className?
21 | 
22 | 
23 | However, considering we are already transpiling this code with [Babel](https://babeljs.io/), why not just convert `class` to `className` and never think about this again?
24 | 
25 | This is especially useful if you are lucky enough to have designers writing JSX or you often copy & paste HTML into your React components.
26 | 
27 | ## Installation
28 | 
29 | ```
30 | npm install --save-dev jsx-html-class
31 | ```
32 | 
33 | #### CLI
34 | ```
35 | babel --plugins jsx-html-class script.js
36 | ```
37 | 
38 | #### .babelrc
39 | ```
40 | {
41 |   "plugins": ["jsx-html-class"]
42 | }
43 | ```
44 | 
45 | #### Babelify
46 | ```
47 | browserify({
48 |   // etc etc
49 |   transform: [
50 |     babelify.configure({
51 |       plugins: ["jsx-html-class"]
52 |     })
53 |   ]
54 | });
55 | ```
56 | 
57 | Now you can freely use either `class` or `className` and safely ensure your HTML classes will be properly rendered.
58 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (babel) {
 2 |   return new babel.Transformer('jsx-html-class', {
 3 |     JSXAttribute: {
 4 |       exit: function (node, parent, scope, file) {
 5 |         if (node.name.name === 'class') {
 6 |           node.name.name = 'className';
 7 |         }
 8 |         return node;
 9 |       }
10 |     }
11 |   });
12 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jsx-html-class",
 3 |   "version": "1.0.3",
 4 |   "description": "Babel plugin to allow the use of \"class\" instead of \"className\" in JSX",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/appfigures/jsx-html-class.git"
12 |   },
13 |   "keywords": [
14 |     "babel",
15 |     "jsx",
16 |     "react",
17 |     "className"
18 |   ],
19 |   "author": "Charlie Martin <charlie@appfigures.com>",
20 |   "license": "ISC",
21 |   "bugs": {
22 |     "url": "https://github.com/appfigures/jsx-html-class/issues"
23 |   },
24 |   "homepage": "https://github.com/appfigures/jsx-html-class"
25 | }
26 | 


--------------------------------------------------------------------------------