Registry / web-framework / babel-plugin-react-html-attrs

babel-plugin-react-html-attrs

library3.0.5jsnpmunverified

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.

web-framework

npm install babel-plugin-react-html-attrs

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-html-attrs

web-frameworkjavascriptv3.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

Default import for programmatic use in Babel config.

plugin reference

✓ "plugins": ["react-html-attrs"]

✗ "plugins": ["babel-plugin-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)

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

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

CJS require returns the plugin directly; destructuring not needed.

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

Debug

Known issues

breakingv3.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).

affects: >=3.0.0

breakingv2.0.0: Babel 6 version only. Babel 5 support dropped.

fix

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

affects: 2.0.0 - 2.99.99

deprecatedCommonJS require is deprecated; the package is ESM-first.

fix

Use import statement instead of require.

affects: >=3.0.0

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

affects: >=2.1.0

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

fix

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

affects: >=3.0.0

breakingv3.0.4 dropped support for Node.js 0.12; requires Node 6+.

fix

Upgrade Node to version 6 or higher.

affects: >=3.0.4

Errors

Common errors & fixes

Cannot read property 'type' of undefined

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.

SyntaxError: Unexpected token

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

fix

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

ReferenceError: require is not defined

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.

Upgrade

Version history

3.0.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/insin/babel-plugin-react-html-attrs ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-html-attrs ↗