Html-parser-react NPM

Html-Parser-React

Introduction

you may need to transform html string to react dom, so I develop this parser. you just need transmiting the html string which you want to parse and then you can get a react dom that you can use it as a component.

Install

npm i html-parser-react --save

Usage

Basic

import ReactDOM from 'react-dom';
import Parser from 'html-parser-react';
ReactDom.render(
  <Parser htmlstr={'<h1 style="font-weight: 700;">this is a example!</h1>'} />,
  document.getElementById('root')
);

Render Data

you can use {dataName} to render data the same as react and you need to add actual data by props.

import ReactDOM from 'react-dom';
import Parser from 'html-parser-react';
ReactDom.render(
  <Parser
    htmlStr={`
      <h1 style="font-weight: 700">render data example!</h1>
      <span>{content}</span>
    `}
    data={{ content: 'render data' }}
  ></Parser>,
  document.getElementById('root')
);

Transform Function

you can transmit a transform function to parser component, then the parser will parse html dom by your function.

import React from 'react-dom';
import ReactDOM from 'react-dom';
import Parser from 'html-parser-react';
ReactDom.render(
  <Parser
    key='transform'
    htmlStr={`<div>a transform function example</div>`}
    option={{
      transform: () =>
        React.createElement('div', { key: Math.random() }, ['transform'])
    }}
  ></Parser>,
  document.getElementById('root')
);