How to use static HTML with React
Static HTML is the easiest way of rendering since it contains prewritten HTML that does not change due to events. It is brought to the user's screen precisely as it is originally written or stored.
We know that everything we render in React is in the form of components. Therefore, we can not directly add HTML in a React file. Still, in case we require static HTML rendering in our React Components, there are a few options we can opt from.
Note: One main concern that arises when we render static HTML into React is an XSS attack. Since React aims to have a highly secure environment for its users, it doesn't allow unauthorized HTML to be rendered as it can expose users to risks.
Static HTML with React in three ways
Now, we will go into the details of 3 common methods of rendering static HTML in React along with weighing their pros and cons.
Inline HTML
React supports various HTML tags as they are without any modification. Also, if we want to simply use those tags in our application, we can do so without any modifications.
Code sample
import React from 'react';
function StaticHTML() {
return (
<div style = {{display: 'flex', flexDirection: 'row', justifyContent: 'center', alignContent: 'center', gap: '2rem'}}>
<h>We are using a header tag in React </h>
<p> We are using a paragraph tag in React </p>
<button> This is an HTML button tag </button>
</div>
)
}
export default StaticHTML;Inline HTML is displayed like any normal HTML tag as shown in the image below.
dangerouslySetInnerHTML
dangerouslySetInnerHTML is a prop provided by React that we can add to a component if we want to render HTML inside of it. The value of this prop has to be set to a raw HTML string. The HTML within the string is then correctly parsed and shown on the screen.
The prop achieves this by overriding one of DOM's properties called innerHTML. innerHTML is a built-in DOM node property that contains the HTML content of React components. Since there isn't a way to access it directly due to security concerns, the closest and quickest way is to use dangerouslySetInnerHTML.
Note: The prop dangerouslySetInnerHTML is supported for every built-in component provided by React. The main reason why this prop is named so is to remind users to use it with caution.
Code sample
import React from 'react';
function StaticHTML() {
const htmlString = `
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: black;
font-size: 28px;
margin-bottom: 10px;
}
p {
color: black;
font-size: 18px;
}
</style>
<div class="container">
<h1>Welcome to Static HTML rendering </h1>
<p>This is a p tag rendered by dangerouslySetInnerHTML</p>
</div>
`;
return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}
export default StaticHTML;After we run the above React Application, we can see how React picks up the exact styling (box shadows, colors, etc.) and HTML tags (heading, paragraph) and renders it in its DOM.
Try changing the style and content of the htmlString and see how dangerouslySetInnerHTML modifies the DOM to display the passed string.
DOMPurify
A better way to take care of security concerns is to use a library like DOMPurify. DOMPurify can be modified to sanitize just those tags that we authorize, for instance, the h2 and p tag.
Since this is an external library, we will need to install it first using:
npm i dompurify
Code sample
import React from 'react';
import DOMPurify from 'dompurify';
function StaticHTML() {
const htmlString = `
<h2>We are using a header tag in DOMPurify</h2>
<p>We are using a paragraph tag in DOMPurify</p>
`;
const sanitizedString = DOMPurify.sanitize(htmlString, {
ALLOWED_TAGS: ["p", "h2"]
});
return (
<div style={{display: 'flex',flexDirection: 'column',justifyContent: 'center',alignContent: 'center', gap: '2rem', color:'white', backgroundColor:'black'}}
dangerouslySetInnerHTML={{ __html: sanitizedString }}
/>
);
}
export default StaticHTML;
We observe that this is a relatively safer method than directly calling dangerouslySetInnerHTML because of two reasons:
We sanitize the HTML before rendering.
We can add our approved tags as well.
When to use which option?
Inline HTML | dangerouslySetInnerHTML | DOMPurify |
React supported HTML | React cautions against direct usage | Relatively safer way than direct usage of dangerouslySetInnerHTML |
Used when HTML content is written within the code | Used when HTML content has to be taken from another file or external source | Used when HTML content has to be taken from another file or external source |
We have successfully implemented three different ways through which we can include static HTML in our React code including:
Inline HTML
DangerouslySetInnerHTML prop
DOMPurify library
That sums up our discussion on static HTML usage in React. One thing to always ensure when using any particular method is to check that the HTML provided is from a trusted source.
Test your knowledge of Static HTML and React!
What is the prerequisite of using DOMPurify?
Installing DOMPurify with npm i react-router-dom
Installing DOMPurify library with npm i react-dom
Installing DOMPurify library with npm i dompurify
Free Resources
