A basic Visual Studio Code plugin that converts html text to JSX string Show You can select your html text and use the shortcut ctrl+alt+x There are many things to do
Change log
A lightweight library that converts raw HTML to a React DOM structure. Why?I had a scenario where an HTML template was generated by a different team, yet I wanted to leverage React for the parts I did have control over. The template basically contains something like: <div class="row"> <div class="col-sm-6"> <div data-report-id="report-1"> <!-- A React component for report-1 --> </div> </div> <div class="col-sm-6"> <div data-report-id="report-2"> <!-- A React component for report-2 --> </div> </div> </div> I had to replace each Simply replacing the The html-to-react module solves this problem by parsing each DOM element and converting it to a React tree with one single parent. Installation
ExamplesSimpleThe following example parses each node and its attributes and returns a tree of React elements. const ReactDOMServer = require('react-dom/server'); const HtmlToReactParser = require('html-to-react').Parser; const htmlInput = '<div><h2>Title</h2><p>A paragraph</p></div>'; const htmlToReactParser = new HtmlToReactParser(); const reactElement = htmlToReactParser.parse(htmlInput); const reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement); assert.equal(reactHtml, htmlInput); // true With Custom Processing InstructionsIf certain DOM nodes require specific processing, for example if you want to
capitalize each const ReactDOMServer = require('react-dom/server'); const HtmlToReact = require('html-to-react'); const HtmlToReactParser = require('html-to-react').Parser; const htmlInput = '<div><h2>Title</h2><p>Paragraph</p><h2>Another title</h2></div>'; const htmlExpected = '<div><h2>TITLE</h2><p>Paragraph</p><h2>ANOTHER TITLE</h2></div>'; const isValidNode = function () { return true; }; // Order matters. Instructions are processed in the order they're defined const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React); const processingInstructions = [ { // Custom <h2> processing shouldProcessNode: function (node) { return node.parent && node.parent.name && node.parent.name === 'h2'; }, processNode: function (node, children) { return node.data.toUpperCase(); } }, { // Anything else shouldProcessNode: function (node) { return true; }, processNode: processNodeDefinitions.processDefaultNode } ]; const htmlToReactParser = new HtmlToReactParser(); const reactComponent = htmlToReactParser.parseWithInstructions(htmlInput, isValidNode, processingInstructions); const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent); assert.equal(reactHtml, htmlExpected); Replace the Children of an ElementThere may be a situation where you want to replace the children of an element with a React component. This is beneficial if you want to:
ExampleBelow is a simple template that could get loaded via ajax into your application Before<div class="row"> <div class="col-sm-6"> <div data-container="wysiwyg"> <h2>Sample Heading</h2> <p>Sample Text</p> </div> </div> </div> AfterYou may want to extract the inner html from the <div class="row"> <div class="col-sm-6"> <div data-container="wysiwyg"> <RichTextEditor html={"<h2>Sample heading</h2><p>Sample Text</p>"} /> </div> </div> </div> SetupIn your instructions object, you must specify const React = require('react'); const HtmlToReact = require('html-to-react'); const HtmlToReactParser = require('html-to-react').Parser; const htmlToReactParser = new HtmlToReactParser(); const htmlInput = '<div><div data-test="foo"><p>Text</p><p>Text</p></div></div>'; const htmlExpected = '<div><div data-test="foo"><h2>Heading</h2></div></div>'; const isValidNode = function () { return true; }; const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React); // Order matters. Instructions are processed in // the order they're defined const processingInstructions = [ { // This is REQUIRED, it tells the parser // that we want to insert our React // component as a child replaceChildren: true, shouldProcessNode: function (node) { return node.attribs && node.attribs['data-test'] === 'foo'; }, processNode: function (node, children, index) { return React.createElement('h2', {key: index,}, 'Heading'); } }, { // Anything else shouldProcessNode: function (node) { return true; }, processNode: processNodeDefinitions.processDefaultNode, }, ]; const reactComponent = htmlToReactParser.parseWithInstructions( htmlInput, isValidNode, processingInstructions); const reactHtml = ReactDOMServer.renderToStaticMarkup( reactComponent); assert.equal(reactHtml, htmlExpected); With Preprocessing InstructionsThere may be situations where you want to preprocess nodes before rendering them, analogously to the custom processing instructions functionality. The rationale for supporting preprocessing hooks is generally that you might want to apply more general processing to nodes, before applying custom processing hooks to filtered sets of nodes. You could accomplish the same by calling common functions from your custom processing hooks, but the preprocessing hooks API makes it more convenient. ExampleBelow is a simple template in which you may want to replace div IDs, via a preprocessing hook: <div class="row"> <div id="first" data-process="shared"> <p>Sample For First</p> </div> <div id="second" data-process="shared"> <p>Sample For Second</p> </div> </div> We want to process the above HTML into the following: <div class="row"> <h2 id="preprocessed-first">First</h2> <h2 id="preprocessed-second">Second</h2> </div> We can accomplish that with the following script, using a combination of preprocessing and custom processing instructions: const React = require('react'); const HtmlToReact = require('html-to-react'); const HtmlToReactParser = require('html-to-react').Parser; const htmlToReactParser = new HtmlToReactParser(); const htmlInput = '<div class="row">' + '<div id="first" data-process="shared">' + '<p>Sample For First</p>' + '</div>' + '<div id="second" data-process="shared">' + '<p>Sample For Second</p>' + '</div>' + '</div>'; const htmlExpected = '<div class="row">' + '<h2 id="preprocessed-first">First</h2>' + '<h2 id="preprocessed-second">Second</h2>' + '</div>'; const isValidNode = function () { return true; }; const preprocessingInstructions = [ { shouldPreprocessNode: function (node) { return node.attribs && node.attribs['data-process'] === 'shared'; }, preprocessNode: function (node) { node.attribs = {id: `preprocessed-${node.attribs.id}`,}; }, } ]; const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React); const processingInstructions = [ { shouldProcessNode: function (node) { return node.attribs && node.attribs.id === 'preprocessed-first'; }, processNode: function(node, children, index) { return React.createElement('h2', {key: index, id: node.attribs.id,}, 'First'); }, }, { shouldProcessNode: function (node) { return node.attribs && node.attribs.id === 'preprocessed-second'; }, processNode: function (node, children, index) { return React.createElement('h2', {key: index, id: node.attribs.id,}, 'Second'); }, }, { shouldProcessNode: function (node) { return true; }, processNode: processNodeDefinitions.processDefaultNode, }, ]; const reactComponent = parser.parseWithInstructions(htmlInput, isValidNode, processingInstructions, preprocessingInstructions); const reactHtml = ReactDOMServer.renderToStaticMarkup(reactComponent); assert.equal(reactHtml, htmlExpected); Tests & CoverageTest locally: Test with coverage and report coverage to Coveralls: Test with coverage and open HTML report: How do I convert HTML to JSX?You can use https://magic.reactjs.net/htmltojsx.htm which is an online HTML to JSX compiler. Show activity on this post. You can also use https://transform.tools/html-to-jsx beside https://magic.reactjs.net/htmltojsx.htm as mentioned above.
Can I use HTML in JSX?Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
How convert HTML to text in ReactJS?Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8. <div>{'First ยท Second'}</div>. Safer - Use the Unicode number for the entity inside a Javascript string. ... . Or a mixed array with strings and JSX elements. ... . Last Resort - Insert raw HTML using dangerouslySetInnerHTML .. Is JSX and HTML same?Is JSX HTML? No, JSX is JavaScript XML, an extension of JavaScript that allows writing HTML in React. HTML is a standard markup language for documents designed for the web browser.
|