{"id":19133,"library":"babel-plugin-react-html-attrs","title":"babel-plugin-react-html-attrs","description":"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.","status":"active","version":"3.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/insin/babel-plugin-react-html-attrs","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-react-html-attrs","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-react-html-attrs","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-react-html-attrs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default import for programmatic use in Babel config.","wrong":"import { reactHtmlAttrs } from 'babel-plugin-react-html-attrs'","symbol":"default","correct":"import reactHtmlAttrs from 'babel-plugin-react-html-attrs'"},{"note":"In .babelrc or babel.config.js, use the short name 'react-html-attrs' (Babel resolves 'babel-plugin-' prefix). Since v3.","wrong":"\"plugins\": [\"babel-plugin-react-html-attrs\"]","symbol":"plugin reference","correct":"\"plugins\": [\"react-html-attrs\"]"},{"note":"CJS require returns the plugin directly; destructuring not needed.","wrong":"const { default } = require('babel-plugin-react-html-attrs')","symbol":"require (CJS)","correct":"const reactHtmlAttrs = require('babel-plugin-react-html-attrs')"}],"quickstart":{"code":"// .babelrc example\n{\n  \"presets\": [\"@babel/preset-react\"],\n  \"plugins\": [\"react-html-attrs\"]\n}\n\n// Input JSX:\n// <label class=\"label\" for=\"input\" checked=\"checked\" colspan=\"2\">\n// Output:\n// <label className=\"label\" htmlFor=\"input\" checked colSpan={2}>\n\n// Programmatic usage in Node:\nimport reactHtmlAttrs from 'babel-plugin-react-html-attrs';\nimport { transformSync } from '@babel/core';\n\nconst code = '<label class=\"label\" for=\"input\"></label>';\nconst result = transformSync(code, {\n  presets: ['@babel/preset-react'],\n  plugins: [reactHtmlAttrs]\n});\nconsole.log(result.code);\n// \"<label className=\"label\" htmlFor=\"input\"></label>\"","lang":"typescript","description":"Shows Babel configuration (short plugin name) and programmatic API usage with TypeScript."},"warnings":[{"fix":"If you need transformation on custom components, stick with v2.x (babel-plugin-react-html-attrs@2).","message":"v3.0.0 breaking: attributes are only transformed for host elements (lowercase tag names). Custom components (uppercase) are no longer transformed.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use v1.x with Babel 5, or upgrade to Babel 6+ and v2+.","message":"v2.0.0: Babel 6 version only. Babel 5 support dropped.","severity":"breaking","affected_versions":"2.0.0 - 2.99.99"},{"fix":"Use import statement instead of require.","message":"CommonJS require is deprecated; the package is ESM-first.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Ensure plugins order: [\"react-html-attrs\", \"transform-react-inline-elements\"]","message":"Plugin order matters when used with transform-react-inline-elements. Must be placed after babel-plugin-react-html-attrs in plugins array.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"Add to Babel config: \"presets\": [[\"@babel/preset-react\", { \"throwIfNamespace\": false }]]","message":"XML namespaces in JSX require configuring @babel/preset-react with { throwIfNamespace: false }.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Upgrade Node to version 6 or higher.","message":"v3.0.4 dropped support for Node.js 0.12; requires Node 6+.","severity":"breaking","affected_versions":">=3.0.4"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade to babel-plugin-react-html-attrs@3.0.5 or later.","cause":"Using spread attributes on non-JSXAttribute nodes (fixed in v3.0.5).","error":"Cannot read property 'type' of undefined"},{"fix":"Set @babel/preset-react option throwIfNamespace to false.","cause":"XML namespace like xmlns:xlink not allowed in JSX by default.","error":"SyntaxError: Unexpected token"},{"fix":"Use import reactHtmlAttrs from 'babel-plugin-react-html-attrs' or set type: 'commonjs' in package.json.","cause":"Using CommonJS require in ESM project without bundler polyfill.","error":"ReferenceError: require is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}