https://github.com/appfigures/jsx-html-class
Babel plugin to allow the use of "class" instead of "className" in JSX
https://github.com/appfigures/jsx-html-class
Last synced: 10 months ago
JSON representation
Babel plugin to allow the use of "class" instead of "className" in JSX
- Host: GitHub
- URL: https://github.com/appfigures/jsx-html-class
- Owner: appfigures
- Created: 2015-07-30T21:18:26.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-07-30T22:29:29.000Z (almost 11 years ago)
- Last Synced: 2024-12-03T09:14:04.072Z (over 1 year ago)
- Language: JavaScript
- Size: 141 KB
- Stars: 24
- Watchers: 7
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jsx-html-class
[Babel](https://babeljs.io/) plugin to allow the use of "class" instead of "className" in JSX
https://www.npmjs.com/package/jsx-html-class
## Motivation
React.js requires we use the attribute `className` instead of the traditional `class` in JSX elements.
```javascript
class MyComponent extends React.Component {
render() {
return
Hello world;
}
}
```
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](https://babeljs.io/), 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.
## Installation
```
npm install --save-dev jsx-html-class
```
#### CLI
```
babel --plugins jsx-html-class script.js
```
#### .babelrc
```
{
"plugins": ["jsx-html-class"]
}
```
#### Babelify
```
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.