react-parse-htmlstring v4.0.1

ReactParseHTMLString

Parse any string and return a React component on a html container of your choice!

Try the Live Demo!

Install

npm install react-parse-htmlstring
# or
yarn add react-parse-htmlstring

Usage

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' } }
	/>;
}

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 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 parseHTMLString

Takes 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 .

Usage

import { parseHTMLString } from 'react-parse-htmlstring';

argument

• string: Any string you need parsing!