Common HTML attributes are changed to their JSX equivalents, including className, htmlFor, tabIndex and readOnly.
CONVERT HTML TO REACT JSX
Convert HTML into React-friendly JSX, including className, htmlFor, camel-cased attributes, style objects and self-closing void elements.
TESTED & REVIEWED
WHY USE IT
Common HTML attributes are changed to their JSX equivalents, including className, htmlFor, tabIndex and readOnly.
Inline CSS declarations become a camel-cased JSX style object instead of an HTML style string.
Multiple top-level nodes are wrapped in a React fragment so the result can be pasted into a component.
HOW IT WORKS
Add the HTML element or fragment you want to use in React.
Attributes, styles, comments and void elements are translated to JSX syntax.
Copy the output and connect event handlers, imported assets and dynamic values inside your React project.
COMMON QUESTIONS
It converts markup to JSX. You can place the result inside a component and then add imports, props, state and event-handler functions as needed.
CSS property names are camel-cased and values are quoted inside a style object, for example style={{ color: "red", marginTop: "1rem" }}.