ReactParseHTMLString
Parse any string and return a React component on a html container of your choice!
Install
npm install react-parse-htmlstring
# or
yarn add react-parse-htmlstring
Usage
import React from 'react';
import ParseHTML, { parseHTMLString } from 'react-parse-htmlstring';
class HtmlComponent extends React.Component {
render() {
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' } }
/>;
}
}
API
component <ParseHTML />
Takes a few props and returns equivalent React element
Usage
import ParseHTML from 'react-parse-htmlstring';
props
-
string
: Any string you need parsing! -
className
: CSS classname/s you can attach to style the component -
style
: If you prefer inline styling over aboveclassName
... or use them both!-
{ borderRadius: '1px solid gainsboro' }
: For example.
-
-
wrapperElement
: Any html container element.-
div
: As default when none is provided.
-
function parseHTMLString
Takes any string and returns a parsed and safe HTML string if you really can't avoid using dangerouslySetInnerHTML
.
Usage
import { parseHTMLString } from 'react-parse-htmlstring';
argument
-
string
: Any string you need parsing!
My story behind this library!
Once upon a time... Of course, I am just kidding!
A very recent work of mine requires some crazy string to be rendered as Html! Take below for example:
Given that <strong>max</strong>, <strong>x</strong> and <strong>y</strong>
are declared and initialized, write a solution that if x<y returns max = x!
or something like that...
Of course, there are scenarios that some string won't be rendered properly, and I am still working on it. Patch will be on its way very soon!