html2react
Utility for turning raw HTML into React elements
Last updated 3 years ago by deschtex .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install html2react 
SYNC missed versions from official npm registry.

HTML2React

Build Status npm version

A utility for turning raw HTML into React elements.

Installation

npm install --save html2react

Usage

Basic HTML conversion

If you want to take raw HTML, SVG or any arbitrary XML and turn it into something that you can use in a React application, without using dangerouslySetInnerHTML, then you can simply pass it to html2react:

import React from 'react'
import { render } from 'react-dom'
import HTML2React from 'html2react'

const html = `
  <h1>Foo</h1>
  <p><a href="#" style="text-decoration: none;">Bar</a></p>
  <p>Baz</p>
`

render(
  <div>
    {HTML2React(html)}
  </div>,
  document.getElementById('root')
)

Note: All attributes but event handlers will be transferred to the React elements.

HTML conversion with element overrides

A powerful feature of html2react is the ability to target elements in the provided HTML and override them with React components, using nothing but CSS selectors for the mapping. Super simple!

The following example maps any <a> tag in the HTML to the local Link component:

import React from 'react'
import { render } from 'react-dom'
import HTML2React from 'html2react'

function Link (props) {
  return <a {...props} style={{ textDecoration: 'none' }} />
}

const html = `
  <h1>Foo</h1>
  <p><a href="#">Bar</a></p>
  <p>Baz</p>
`
const content = HTML2React(html, {
  a: Link
})

render(
  <div>
    {content}
  </div>,
  document.getElementById('root')
)

The following example maps any <a> tag with an external class to the local ExternalLink component. It also demonstrates a slightly more complex selector that maps only the third <p> tag to a <p> tag that wraps the local Link component:

import React from 'react'
import { render } from 'react-dom'
import HTML2React from 'html2react'

function Link (props) {
  return <a {...props} style={{ textDecoration: 'none' }} />
}
function ExternalLink (props) {
  return <Link {...props} target='_blank' />
}

const html = `
  <h1>Foo</h1>
  <p><a href="http://bar" class="external">Bar</a></p>
  <p><a href="#">Baz</a></p>
  <p>Qux</p>
`
const content = HTML2React(html, {
  'a.external': ExternalLink,
  'p:nth-of-type(3)': (props) => <p><Link {...props} /></p>,
  a: Link
})

render(
  <div>
    {content}
  </div>,
  document.getElementById('root')
)

License

MIT (http://www.opensource.org/licenses/mit-license.php)

See LICENSE attached.

Current Tags

  • 1.2.1                                ...           latest (3 years ago)

25 Versions

  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
  • 0.3.5                                ...           4 years ago
  • 0.3.4                                ...           4 years ago
  • 0.3.3                                ...           4 years ago
  • 0.3.2                                ...           4 years ago
  • 0.3.1                                ...           4 years ago
  • 0.3.0                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.7                                ...           4 years ago
  • 0.1.6                                ...           4 years ago
  • 0.1.5                                ...           4 years ago
  • 0.1.4                                ...           4 years ago
  • 0.0.6                                ...           6 years ago
  • 0.0.5                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 30
Dependencies (1)
Dev Dependencies (11)

Copyright 2014 - 2016 © taobao.org |