react-parse-htmlstring
Advanced tools
Parse any string and return a React component on a html container of your choice!
Parse any string and return a React component on a html container of your choice!
Once upon a time...
Nah, Just kidding! It's about a recent work of mine that requires some crazy html string and the likes to be rendered as html! It could be a combination of or one of the following:
Given that <strong>max</strong>, <strong>x</strong> and <strong>y</strong> are declared and initialized, write a solution that if x<y returns <strong>max=x</strong>!
if (x<y)
max=x;
else
max=y;
a[1] = 6;
List<Integer> lst = new ArrayList<>();
The issue starts with the browser automatically treating any character or word after "<" as a html tag! And of course, any non-valid html tag like <y or <Integer> from above examples will only be omitted!
Secondly, we also can not "html encode" these strings or even replace with its corresponding html entity since that would lead to literally rendering a valid html tag instead of the intended output such as the <strong>max</strong> where max is intended to be rendered bold!
And so, if you're still here... introducing react-parse-htmlstring!
npm install react-parse-htmlstring
# or
yarn add react-parse-htmlstring
import React from 'react';
import ParseHTML, { parseHTMLString } from 'react-parse-htmlstring';
function HtmlComponent() {
const htmlString = 'Even with x<y <i>I am still <strong>Strong!</strong></i>';
return <ParseHTML
string={ htmlString }
className="demo"
style={ { padding: '0.5rem', borderRadius: '1px solid gainsboro' } }
/>;
}
component <ParseHTML />Takes a few props and returns equivalent React element
import ParseHTML from 'react-parse-htmlstring';
string: Any string you need parsing!className: CSS classname/s you can attach to style the componentstyle: If you prefer inline styling to above className... or use them both!
{ borderRadius: '1px solid gainsboro' }: For example.wrapperElement: Any html container element.
div: As default when none is provided.function parseHTMLStringTakes any string and returns a parsed and safe HTML string if you're just like me that has some situations where the dangerouslySetInnerHTML has to be used .
import { parseHTMLString } from 'react-parse-htmlstring';
string: Any string you need parsing!For any undesired rendering/result, please do file an issue right here!.
Surely, I will immediately jump on it as soon as I can. Cheers!
--sim
FAQs
Parse any string and return a React component on a html container of your choice!
The npm package react-parse-htmlstring receives a total of 1,267 weekly downloads. As such, react-parse-htmlstring popularity was classified as popular.
We found that react-parse-htmlstring demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket found a malicious postinstall hook across 700+ GitHub repos, including PHP packages on Packagist and Node.js project repositories.
Security News
Vibe coding at scale is reshaping how packages are created, contributed, and selected across the software supply chain
Security News
npm invalidated all granular access tokens that bypass 2FA after a fresh Mini Shai-Hulud wave compromised 323 npm packages. Staged publishing also entered public preview.