leodr / html-to-jsx-transform

A library for converting an HTML string into a JSX string using ASTs.

html-to-jsx-transform

A library for converting an HTML string into a JSX string using ASTs.

Documentation • Development • Contribute

---

html-to-jsx-transform transforms a string of HTML into JSX. It works by turning it into an AST using parse5, converting every node to its equivalent JSX node to create a Babel AST and then stringifying that using @babel/generator.

The library is tested for a variety of different scenarios, if you happen to find a flaw please open an issue so we can add it to the test suite.

❯ Documentation

• htmlToJsx

htmlToJsx

Takes a string of HTML and synchronously returns a string with the equivalent JSX source code.

Example

import { htmlToJsx } from "html-to-jsx-transform";

const jsx = htmlToJsx('<h1 tabindex="0">Hello World!</h1>');

// jsx === '<h1 tabIndex={0}>Hello World!</h1>';

Behavior

Elements

• style and script elements get template literal bodies wrapped in curly braces
• Adjacent elements are wrapped in a Fragment (<>...</>)

Attributes

• style attributes are parsed into objects
• Attributes are renamed and casing is adjusted (including SVG)
• Event handlers are converted into arrow functions
• Boolean and numeric attributes are converted into boolean or number values

❯ Development

This library is best developed by writing test cases first. Tests can be executed by running npm test.

Releasing a new version on NPM

To release a new version on npm, run npm version (patch|minor|major) to increase the version. This will create a Git tag for you.

Then run npm publish, the prepublishOnly hook will test and build the package and then publish it.

❯ Contribute

If you think you have any ideas that could benefit the project, feel free to create an issue or pull request!

---

_{Project by Leo Driesch, released under MIT license.}