html-to-jsx-transform
v1.2.0
Published
A library for converting an HTML string into a JSX string using ASTs.
Downloads
701
Maintainers
Readme
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
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
andscript
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!