{"id":13801439,"url":"https://github.com/insin/babel-plugin-react-html-attrs","last_synced_at":"2025-04-05T18:08:42.696Z","repository":{"id":57188895,"uuid":"43272202","full_name":"insin/babel-plugin-react-html-attrs","owner":"insin","description":"Babel plugin which transforms HTML and SVG attributes on JSX host elements into React-compatible attributes","archived":false,"fork":false,"pushed_at":"2020-07-23T03:22:43.000Z","size":57,"stargazers_count":178,"open_issues_count":1,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-14T02:21:29.415Z","etag":null,"topics":["attributes","babel","babel-plugin","html","jsx","react"],"latest_commit_sha":null,"homepage":"https://astexplorer.net/#/gist/0008d677e8156dab437be51d1fee1757/latest","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-28T00:51:11.000Z","updated_at":"2024-05-02T11:33:29.000Z","dependencies_parsed_at":"2022-08-28T11:11:34.251Z","dependency_job_id":null,"html_url":"https://github.com/insin/babel-plugin-react-html-attrs","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fbabel-plugin-react-html-attrs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fbabel-plugin-react-html-attrs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fbabel-plugin-react-html-attrs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fbabel-plugin-react-html-attrs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/babel-plugin-react-html-attrs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378149,"owners_count":20929297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["attributes","babel","babel-plugin","html","jsx","react"],"created_at":"2024-08-04T00:01:22.823Z","updated_at":"2025-04-05T18:08:42.680Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-react-html-attrs\n\n[![Travis][travis-badge]][travis]\n[![npm package][npm-badge]][npm]\n\n**As of v3 this plugin _only_ transforms host elements (JSX elements with lowercase tag names).**\n\n**Stick with `babel-plugin-react-html-attrs@2` if you just want to transform `class` → `className` and `for` → `htmlFor` on _all_ JSX elements.**\n\nThis plugin's goal is to allow you to copy and paste HTML and SVG verbatim into your React components, by:\n\n- Transforming HTML attribute names into React-compatible DOM property names:\n\n  `\u003clabel class=\"label\" for=\"input\"\u003e` → `\u003clabel className=\"label\" htmlFor=\"input\"\u003e`\n\n- Transforming numeric HTML attribute values into numeric [JSX expressions](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx):\n\n  `\u003ctd colspan=\"2\"\u003e` → `\u003ctd colSpan={2}\u003e`\n\n- Removing values from [boolean HTML attributes](https://html.spec.whatwg.org/#boolean-attributes), as \"the presence of a boolean attribute on an element represents the true value\":\n\n  `\u003cinput checked=\"checked\"\u003e` → `\u003cinput checked\u003e`\n\n## Installation \u0026 Usage\n\nInstall the plugin for Babel \u003e= 6:\n\n```\nnpm install --save-dev babel-plugin-react-html-attrs\n```\n\nEdit your `.babelrc` to include `react-html-attrs` as a plugin:\n\n```json\n{\n  \"plugins\": [\"react-html-attrs\"]\n}\n```\n\n## Babel Configuration for XML Namespaces in JSX\n\nTo 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.:\n\n```json\n{\n  \"presets\": [[\"@babel/preset-react\", { \"throwIfNamespace\": false }]]\n}\n```\n\n## ESLint Configuration\n\nIf you're using [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)'s' [`no-unknown-property` rule](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md), you can configure it to ignore usage of HTML attributes in your JSX like so:\n\n\u003cdetails\u003e\n\u003csummary\u003eShow ESLint config\u003c/summary\u003e\n\u003cpre\u003e{\n  \"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\"]}]\n}\u003c/pre\u003e\n\u003c/details\u003e\n\n## TypeScript Support ⛈\n\nUnfortunately, 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`.\n\n[This Pull Request to DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/44416) 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`.\n\nIn the meantime, here's a partial type definition file (for HTML attributes whose name doesn't match their DOM property name, including the all-important `class` and `for`) you can drop into your `typings/` when using this plugin:\n\n- [`babel-plugin-react-html-attrs-partial.d.ts`](typings/babel-plugin-react-html-attrs-partial.d.ts)\n\n## Caveats\n\nRead [facebook/react#4433](https://github.com/facebook/react/issues/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).\n\n## Attribution\n\nTesting setup cloned from [gaearon/babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform).\n\n## MIT Licensed\n\n[travis-badge]: https://img.shields.io/travis/insin/babel-plugin-react-html-attrs/master.png?style=flat-square\n[travis]: https://travis-ci.org/insin/babel-plugin-react-html-attrs\n[npm-badge]: https://img.shields.io/npm/v/babel-plugin-react-html-attrs.png?style=flat-square\n[npm]: https://www.npmjs.org/package/babel-plugin-react-html-attrs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fbabel-plugin-react-html-attrs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Fbabel-plugin-react-html-attrs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fbabel-plugin-react-html-attrs/lists"}