react-parse-htmlstring

2.1.2 • Public • Published

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

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

Package Sidebar

Install

npm i react-parse-htmlstring@2.1.2

Version

2.1.2

License

ISC

Unpacked Size

1.43 MB

Total Files

22

Last publish

Collaborators

  • jaosimt