React component to html string

React.js: Is it possible to convert a react component to HTML DOM’s?

I’m working on a map-based app that uses Google Map API to create markers and its info window in React.js. The infowindow.setContent() only accepts either a String or HTML . It’s impossible for me to pass in String as I have a button that links to a specific method in another react component (something like: _this.props.addList(place) ). Thus I must fill the argument as HTML DOM as the following lines of code:

var div = document.createElement('div'); var title = document.createElement('h4'); title.innerHTML = place.name; var btn = document.createElement('button'); btn.className = 'btn btn-danger btn-block'; btn.appendChild(document.createTextNode('I want to go here !!')); div.appendChild(title).appendChild(btn); google.maps.event.addListener(marker, 'click', function() < infowindow.setContent( div ); infowindow.open(map, this); >); btn.addEventListener('click', function() < _this.props.addList(place); >);

The codes work for me but I don’t wanna create elements one by one. I’ve also tried to pass the argument with a React component but it seems not working:

createMarker: function() < /** Some other lines of code */ var _this = this; google.maps.event.addListener(marker, 'click', function() < infowindow.setContent( _this._renderInfoWindow(place) ); infowindow.open(map, _this); >); >, // my infowindow rendering method _renderInfoWindow: function(place) < return( 
  
>I want to go here !! 
 ) >,

so is there another way to at least convert a react component to HTML so that I don’t have to write document.createElement() one by one? Thanks

Источник

How to render a React element to an HTML string?

What happens when you want to render a React string or element to an HTML string? For some reasons, you may want to have the generated HTML string from your React component instead of a mounted component and render it on the page.

If you want to render an HTML String for SSR purposes, you may consider using a framework like Next.js instead of manually rendering a React string to HTML. Using a framework like Next.js can offer a wide range of features and tools for building server-rendered applications like abstracting away a lot of the complexity of setting up server rendering, automatic code splitting, significant performance improvements, . etc.

What is ReactDOMServer?

The ReactDOMServer module is a part of the official React library. It provides methods for rendering React components to static HTML. It’s useful for server-side rendering, where you want to generate HTML on the server and send it to the client.

Converting a React String to an HTML String

To convert a React string to an HTML string, we need to use the renderToString method provided by ReactDOMServer. The renderToString method takes a React component as an argument and returns a string of HTML.

Here is an example of how to use the renderToString method to convert a React string to an HTML string:

import React from 'react'; import ReactDOMServer from 'react-dom/server';  const reactString = '
Hello, world!
'; const htmlString = ReactDOMServer.renderToString(React.createElement('div',  dangerouslySetInnerHTML:  __html: reactString > >));  console.log(htmlString); // Output: 
Hello, world! 

In this example, we are using React.createElement to create a React element with the dangerouslySetInnerHTML prop set to < __html: reactString >. The dangerouslySetInnerHTML prop is used to render HTML directly to the page. Then, the ReactDOMServer.renderToString function convert the React element to an HTML string.

Here is another example but with a custom component you already created before. This example convert a JSX to string.

import  renderToString > from 'react-dom/server'  renderToString(YourAwesomeComponent props1="value1" props2= value: '2' >> />) 

The renderToString function can be used on both server-side and client-side. If you want to render all page server-side for SEO or UX purposes for example, you can use the ReactDOMServer.renderToNodeStream function to improve your load time or the ReactDOMServer.renderToPipeableStream in newer React versions. You can find an example for this last method on the renderToPipeableStream Documentation.

More informations on the React documentation.

If you’re seeking solutions to a problem or need expert advice, I’m here to help! Don’t hesitate to book a call with me for a consulting session. Let’s discuss your situation and find the best solution together.

Источник

How to get html code from reactjs component

I need to send an email of my rendered reactjs component, for that, I need to convert my react component in HTML and send the email. I know how to send HTML through the mail, but getting stuck in how to get HTML from the reactjs component.

3 Answers 3

You can use renderToString of react-dom/server and use it like

import ReactDOMServer from 'react-dom/server' const htmlString = ReactDOMServer.renderToString() 

ReactDOMServer is used for SSR (Server Side Rendering) of react components.

renderToString converts your React component to string. So, You will get string html from JSX of your component.

Tried to console htmlString but it shows only , the complete component is not printed, so am I doing something wrong?

There are two ways to do that. One is the renderToString() method, as the other answer mentions.

Similar to renderToString, except this doesn’t create extra DOM attributes that React uses internally, such as data-reactroot. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.

If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use renderToString on the server and ReactDOM.hydrate() on the client.

For sending email you don’t need extra DOM attributes or hydration since the email doesn’t include any JS code, renderToStaticMarkup() will do the job.

Источник

How to convert react component to html string?

Solution 1: You can use dangerouslySetInnerHTML Source: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml Solution 2: supports HTML strings out of the box, so there’s nothing to do except set the property of the component with the string you receive from the database. So, I wanted to do: Let’s suppose MyComponent is just returning h3 element for now: This will be rendered in the browser like this: What I can think here to resolve the issue is converting component with string of html first.

How to convert react component to html string?

I have found similar to my issue here.

But I have a little bit different scenario. I have string of html rather than just string. So, I wanted to do:

Let’s suppose MyComponent is just returning h3 element for now:

const MyComponent = () => ( ) var parts = "
I
am a cow;
cows say moo. MOOOOO." .split(/(\bmoo+\b)/gi); for (var i = 1; i < parts.length; i += 2) < parts[i] = > ; > // But I need html to be rendered return > /> 

This will be rendered in the browser like this:

I am a cow; cows say ,[object Object],. ,[object Object],. 

What I can think here to resolve the issue is converting component with string of html first.

parts[i] = convertToStringOfHtml(> ); 

But I don’t have idea how to convert component to string of html.

import < renderToString >from 'react-dom/server' // // parts[i] = renderToString(> ) 

view more here https://reactjs.org/docs/react-dom-server.html

You can also do something like this

import React from "react"; import ReactDOM from "react-dom"; import ReactDOMServer from "react-dom/server"; const Hello = () => 
hello
; const html = ReactDOMServer.renderToStaticMarkup(); console.log(html.toString()); 

How to parse html to React component?, As pointed out in this answer by EsterlingAccimeYoutuber, you can use a parser in case you don’t want to use dangerouslySetInnerHTML attribute.. …

Render HTML string as real HTML in a React component

Here’s what I tried and how it goes wrong.

The description property is just a normal string of HTML content. However it’s rendered as a string, not as HTML for some reason.

Is this.props.match.description a string or an object? If it’s a string, it should be converted to HTML just fine. Example:

class App extends React.Component < constructor() < super(); this.state = < description: '
something
' > > render() < return ( > /> ); > > ReactDOM.render(, document.getElementById('root')); 

However if description is

something

without the quotes » , you’re going to get:

​Object < $$typeof: [object Symbol] <>, _owner: null, key: null, props: Object < children: "something", style: "color:red;" >, ref: null, type: "h1" > 

If It’s a string and you don’t see any HTML markup the only problem I see is wrong markup..

If you are dealing with HTML Entities, You need to decode them before sending them to dangerouslySetInnerHTML that’s why it’s called «dangerously» 🙂

class App extends React.Component < constructor() < super(); this.state = < description: '<p><strong>Our Opportunity:</strong></p>' >> htmlDecode(input) < var e = document.createElement('div'); e.innerHTML = input; return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; >render() < return ( > /> ); > > ReactDOM.render(, document.getElementById('root')); 

import ReactHtmlParser from 'react-html-parser';

Lifting up @okram’s comment for more visibility:

from its github description: Converts HTML strings directly into React components avoiding the need to use dangerouslySetInnerHTML from npmjs.com A utility for converting HTML strings into REACT components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.

Check if the text you’re trying to append to the node is not escaped like this:

if is escaped you should convert it from your server-side.

The node is text because is escaped

The node is a dom node because isn’t escaped

If you have HTML in a string I would recommend using a package called html-react-parser .

Installation

npm install html-react-parser 

Usage

import parse from 'html-react-parser' const yourHtmlString = '
Hello
' 

Reactjs — How render a string as HTML in React, How can I render it as HTML and not as a string?. Here is my code. import React from ‘react’; import axios from ‘axios’; class API extends …

Convert String to HTML on React , rich text editor

I am using React-Quill to add Rich text editor to my app.

have the next string store in my DB:

const text = '
Hello World
Next Line
'; 

Now I want to «Render» the text const in a REACT component, but with the «Styuling» that HTML gives to it.

Hello World

How can I do it? or other rich text editor to achieve that?

You can use dangerouslySetInnerHTML

const text = '
Hello World
Next Line
'; > /> 

react-quill supports HTML strings out of the box, so there’s nothing to do except set the value property of the component with the string you receive from the database.

Yeah react-quill is the way for working with React. I also have had a small demo to demonstrate how it works (we might have to put some css files to make it looking good): https://codesandbox.io/s/hardcore-hill-mdxji?file=/src/App.js

How to get html code from reactjs component, const htmlString = ReactDOMServer.renderToString() ReactDOMServeris used for SSR (Server Side Rendering)of react components. …

Rendering REACT component as string of HTML to copy or add to textarea

I’m trying to get the HTML from a component as a markup string, so I can append it to a textarea. The hack below with the first button works, but I think it’s not the right way to approach this problem and I don’t like having a random hidden div in my page.

.renderToStaticMarkup seem to be the perfect tool, but it trows an error directly:

Uncaught TypeError: can’t access property «blockList», Object(. )(. ) is null

blocklist is coming from a store, could it be that .renderToStaticMarkup can’t be called on components using the useContext hook?

import React, < useState, useEffect >from "react"; import ReactDOMServer from "react-dom"; import < Icon, BlockCompilerToHTML >from "components/lib"; import Style from "./themeConfigCard.module.scss"; import < MyButton >from "components/myButton/myButton"; export function ThemeConfigCard(props) < let htmlString = ""; useEffect(() =>< //htmlString = ReactDOMServer.renderToStaticMarkup(); //Above commented because it trows error. >, []); return ( 
> < console.log(document.getElementById("rendered_html").innerHTML); document.getElementById("mytextarea").value = document.getElementById("rendered_html").innerHTML; >> > Get HTML as string with hack < document.getElementById("mytextarea").value = htmlString; >> > Get HTML as string using renderToStaticMarkup >