babel-plugin-react-html-attrs

3.0.5 verified Sat Apr 25 auth: no javascript

Babel plugin that transforms HTML and SVG attributes on JSX host elements into React-compatible DOM property names, numeric values, and boolean handling. Version 3.0.5 is current stable; it only transforms host elements (lowercase tag names) since v3 breaking change. Key differentiator: allows copying HTML/SVG verbatim into React components without manual attribute renaming. Alternatives like babel-plugin-html-attributes have narrower coverage or different API.

Common errors

error Cannot read property 'type' of undefined ↓

cause Using spread attributes on non-JSXAttribute nodes (fixed in v3.0.5).

fix

Upgrade to babel-plugin-react-html-attrs@3.0.5 or later.

error SyntaxError: Unexpected token ↓

cause XML namespace like xmlns:xlink not allowed in JSX by default.

fix

Set @babel/preset-react option throwIfNamespace to false.

error ReferenceError: require is not defined ↓

cause Using CommonJS require in ESM project without bundler polyfill.

fix

Use import reactHtmlAttrs from 'babel-plugin-react-html-attrs' or set type: 'commonjs' in package.json.

Warnings

breaking v3.0.0 breaking: attributes are only transformed for host elements (lowercase tag names). Custom components (uppercase) are no longer transformed. ↓

fix If you need transformation on custom components, stick with v2.x (babel-plugin-react-html-attrs@2).

breaking v2.0.0: Babel 6 version only. Babel 5 support dropped. ↓

fix Use v1.x with Babel 5, or upgrade to Babel 6+ and v2+.

deprecated CommonJS require is deprecated; the package is ESM-first. ↓

fix Use import statement instead of require.

gotcha Plugin order matters when used with transform-react-inline-elements. Must be placed after babel-plugin-react-html-attrs in plugins array. ↓

fix Ensure plugins order: ["react-html-attrs", "transform-react-inline-elements"]

gotcha XML namespaces in JSX require configuring @babel/preset-react with { throwIfNamespace: false }. ↓

fix Add to Babel config: "presets": [["@babel/preset-react", { "throwIfNamespace": false }]]

breaking v3.0.4 dropped support for Node.js 0.12; requires Node 6+. ↓

fix Upgrade Node to version 6 or higher.

Install

npm install babel-plugin-react-html-attrs

yarn add babel-plugin-react-html-attrs

pnpm add babel-plugin-react-html-attrs

Imports

default

wrong

import { reactHtmlAttrs } from 'babel-plugin-react-html-attrs'

correct

import reactHtmlAttrs from 'babel-plugin-react-html-attrs'

Default import for programmatic use in Babel config.

plugin reference
wrong
```
"plugins": ["babel-plugin-react-html-attrs"]
```
correct
```
"plugins": ["react-html-attrs"]
```
In .babelrc or babel.config.js, use the short name 'react-html-attrs' (Babel resolves 'babel-plugin-' prefix). Since v3.

require (CJS)

wrong

const { default } = require('babel-plugin-react-html-attrs')

correct

const reactHtmlAttrs = require('babel-plugin-react-html-attrs')

CJS require returns the plugin directly; destructuring not needed.

Quickstart

Shows Babel configuration (short plugin name) and programmatic API usage with TypeScript.

// .babelrc example
{
  "presets": ["@babel/preset-react"],
  "plugins": ["react-html-attrs"]
}

// Input JSX:
// <label class="label" for="input" checked="checked" colspan="2">
// Output:
// <label className="label" htmlFor="input" checked colSpan={2}>

// Programmatic usage in Node:
import reactHtmlAttrs from 'babel-plugin-react-html-attrs';
import { transformSync } from '@babel/core';

const code = '<label class="label" for="input"></label>';
const result = transformSync(code, {
  presets: ['@babel/preset-react'],
  plugins: [reactHtmlAttrs]
});
console.log(result.code);
// "<label className="label" htmlFor="input"></label>"