npm

Need private packages and team management tools?Check out npm Orgs. »

babel-plugin-react-html-attrs

2.1.0 • Public • Published

babel-plugin-react-html-attrs

Travis npm package

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.

Installation & Usage

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"
  ]
}

ESLint Configuration

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"]}]
}

Caveats

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.

Attribution

Testing setup cloned from gaearon/babel-plugin-react-transform.

MIT Licensed

Keywords

none

install

npm i babel-plugin-react-html-attrs

Downloadsweekly downloads

7,351

version

2.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability