babel-plugin-react-html-attrs
Babel plugin which transforms HTML attributes on JSX host elements into React-compatible DOM attributes
Last updated 2 months ago by insin .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-react-html-attrs 
SYNC missed versions from official npm registry.

babel-plugin-react-html-attrs

Travis npm package

As of v3 this plugin only transforms host elements (JSX elements with lowercase tag names).

Stick with babel-plugin-react-html-attrs@2 if you just want to transform classclassName and forhtmlFor on all JSX elements.

This plugin's goal is to allow you to copy and paste HTML and SVG verbatim into your React components, by:

  • Transforming HTML attribute names into React-compatible DOM property names:

    <label class="label" for="input"><label className="label" htmlFor="input">

  • Transforming numeric HTML attribute values into numeric JSX expressions:

    <td colspan="2"><td colSpan={2}>

  • Removing values from boolean HTML attributes, as "the presence of a boolean attribute on an element represents the true value":

    <input checked="checked"><input checked>

Installation & Usage

Install the plugin for Babel >= 6:

npm install --save-dev babel-plugin-react-html-attrs

Edit your .babelrc to include react-html-attrs as a plugin:

{
  "plugins": ["react-html-attrs"]
}

Babel Configuration for XML Namespaces in JSX

To allow use of XML namespaces in JSX for SVG, you will have to configure the preset or plugin you're using with {"throwIfNamespace": false}, e.g.:

{
  "presets": [["@babel/preset-react", { "throwIfNamespace": false }]]
}

ESLint Configuration

If you're using eslint-plugin-react's' no-unknown-property rule, you can configure it to ignore usage of HTML attributes in your JSX like so:

<summary>Show ESLint config</summary>
{
  "react/no-unknown-property": [2, {"ignore": ​["accept-charset", "accesskey", "allowfullscreen", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "autoplay", "autosave", "cellpadding", "cellspacing", "charset", "class", "classid", "colspan", "contenteditable", "contextmenu", "controlslist", "crossorigin", "datetime", "disablepictureinpicture", "disableremoteplayback", "enctype", "for", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "frameborder", "hreflang", "http-equiv", "inputmode", "itemid", "itemprop", "itemref", "itemscope", "itemtype", "keyparams", "keytype", "marginheight", "marginwidth", "maxlength", "mediagroup", "minlength", "nomodule", "novalidate", "playsinline", "radiogroup", "readonly", "referrerpolicy", "rowspan", "spellcheck", "srcdoc", "srclang", "srcset", "tabindex", "usemap", "accent-height", "alignment-baseline", "arabic-form", "baseline-shift", "cap-height", "clip-path", "clip-rule", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "dominant-baseline", "enable-background", "fill-opacity", "fill-rule", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "glyph-name", "glyph-orientation-horizontal", "glyph-orientation-vertical", "horiz-adv-x", "horiz-origin-x", "image-rendering", "letter-spacing", "lighting-color", "marker-end", "marker-mid", "marker-start", "overline-position", "overline-thickness", "paint-order", "panose-1", "pointer-events", "rendering-intent", "shape-rendering", "stop-color", "stop-opacity", "strikethrough-position", "strikethrough-thickness", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-anchor", "text-decoration", "text-rendering", "underline-position", "underline-thickness", "unicode-bidi", "unicode-range", "units-per-em", "v-alphabetic", "v-hanging", "v-ideographic", "v-mathematical", "vector-effect", "vert-adv-y", "vert-origin-x", "vert-origin-y", "word-spacing", "writing-mode", "x-height", "xlink:actuate", "xlink:arcrole", "xlink:href", "xlink:role", "xlink:show", "xlink:title", "xlink:type", "xml:base", "xml:lang", "xml:space", "xmlns:xlink"]}]
}

TypeScript Support ⛈

Unfortunately, it doesn't seem to be possible to provide full TypeScript support for JSX which takes advantage of this plugin's transformations, as it's not currently possible to override host element attribute types in the interface definitions provided by @types/react.

This Pull Request to DefinitelyTyped is for a @types/babel-plugin-react-html-attrs type definition which forks @types/react to add support for missing HTML attributes and to allow all numeric and boolean attributes to be strings as per HTML, but even if approved and merged, this will likely break if you try to use it with other type definitions dependent on @types/react.

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 a similar transformation).

Attribution

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

MIT Licensed

Current Tags

  • 1.0.0                                ...           babel5 (5 years ago)
  • 3.0.4                                ...           latest (2 months ago)

8 Versions

  • 3.0.4                                ...           2 months ago
  • 3.0.3                                ...           2 months ago
  • 3.0.2                                ...           2 months ago
  • 3.0.1                                ...           2 months ago
  • 3.0.0                                ...           2 months ago
  • 2.1.0                                ...           3 years ago
  • 2.0.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 2
This Week 58
This Month 104
Last Day 15
Last Week 61
Last Month 268
Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |