Transforms JSX class
attributes into className
and for
attributes into htmlFor
, allowing you to copy and paste HTML into your React components without having to manually edit these particular attributes each time.
Install the plugin:
# For Babel 6
npm install --save-dev babel-plugin-react-html-attrs
# For Babel 5
npm install --save-dev babel-plugin-react-html-attrs@1.0.0
Then edit your .babelrc
to include react-html-attrs
:
{
"plugins": [
"react-html-attrs"
]
}
If you're using eslint-plugin-react's' no-unknown-property
rule, as of v5.2.0 you can configure it to ignore usage of class
and for
in your JSX like so:
{
"react/no-unknown-property": [2, {"ignore": ["class", "for"]}]
}
Read facebook/react#4433 for the reasoning behind why React treats these attributes the way it does and the potential gotchas which await you if you use this plugin (an old version of the JSX transformer used to perform this transformation).
It's fairly common to access a className
prop in user-defined components, and if you get used to using a class
prop instead, that you're actually passing className
is surprising behaviour.
Testing setup cloned from gaearon/babel-plugin-react-transform.