html2any

Raw HTML String

<div>
  <h1>Getting Started</h1>
  <p>Welcome to html2any documentation!</p>

  <h3>Install</h3>
  <p>html2any is a dependency free library can be used in any JS runtime.</p>
  <pre><code>npm install --save html2any</code></pre>

  <h3>Usage</h3>

  <pre><code>
import html2any, { parse, transform } from 'html2any'

const html = `<div>123</div>`

const ast = parse(html)[0]

function rule(node, children) {
  if (node.name === 'div') {
    return React.createElement(node.name. null, children)
  } else {
    return node // string
  }
}

const vdom = transform(ast, rule)
// jsx vdom form of html
// { type: 'div', props: {...}, children: '...' }


// render it as react
ReactDOM.render(vdom, document.getElementById('root'))
    </code>
  </pre>  
</div>

Transformed React Components from HTML

Getting Started

Welcome to html2any documentation!

Install

html2any is a dependency free library can be used in any JS runtime.

npm install --save html2any

Usage

import html2any, { parse, transform } from 'html2any'

const html = `<div>123</div>`

const ast = parse(html)[0]

function rule(node, children) {
  if (node.name === 'div') {
    return React.createElement(node.name. null, children)
  } else {
    return node // string
  }
}

const vdom = transform(ast, rule)
// jsx vdom form of html
// { type: 'div', props: {...}, children: '...' }


// render it as react
ReactDOM.render(vdom, document.getElementById('root'))