About the HTML to JSX Converter
Pasting HTML into a React component produces a wall of warnings: class must be className, for must be htmlFor, every attribute with a dash needs camelCase, inline styles must be objects, and void elements such as <img> and <input> must be self-closed. This converter applies all of those rules mechanically.
It renames the common attributes (tabindex to tabIndex, readonly to readOnly, maxlength to maxLength, SVG attributes such as stroke-width to strokeWidth), keeps data-* and aria-* untouched as JSX requires, converts event handler attributes to their camelCase names, parses style="..." into an object literal with camelCased properties and numeric values unquoted, and rewrites HTML comments as {/* ... */}.
Event handler values are left as strings, since JSX needs a function reference; replace onClick="addToCart()" with onClick={addToCart} by hand. The output is a fragment, not a full component; wrap it in a function and return it. Format the result with the JSX Formatter.
How to use
- Paste HTML on the left.
- Copy the JSX and paste it inside your component's return.
- Replace string event handlers with function references.
Common questions
- Does it convert inline styles?
- Yes. style="padding: 16px" becomes style={{ padding: '16px' }}, with numeric-only values left unquoted.
- What about SVG attributes?
- Common ones such as stroke-width, fill-rule and viewBox are mapped. Unusual dashed attributes are camelCased automatically.
- Are data- and aria- attributes changed?
- No. JSX keeps them in their dashed form, and so does the converter.
- Does it produce TSX?
- The output is valid TSX as well, since no types are involved in the markup.