Utility for turning raw HTML into React elements
npm install html2react
A utility for turning raw HTML into React elements.
``
npm install --save html2react
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:
`javascript
import React from 'react'
import { render } from 'react-dom'
import HTML2React from 'html2react'
const html =
Baz
render(
{HTML2React(html)}
,
document.getElementById('root')
)
Note: All attributes but event handlers will be transferred to the React elements.
$3
A powerful feature of
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
tag in the HTML to the local Link component:`javascript
import React from 'react'
import { render } from 'react-dom'
import HTML2React from 'html2react'function Link (props) {
return
}
const html =
Baz
const content = HTML2React(html, {
a: Link
})render(
{content}
,
document.getElementById('root')
)
The following example maps any
tag with an external class to the local ExternalLink component. It also demonstrates a slightly more complex selector that maps only the third tag to a
tag that wraps the local Link component:
`javascript
import React from 'react'
import { render } from 'react-dom'
import HTML2React from 'html2react'
function Link (props) {
return
}
function ExternalLink (props) {
return
}
const html =
Qux
const content = HTML2React(html, {
'a.external': ExternalLink,
'p:nth-of-type(3)': (props) => ,
a: Link
})render(
{content}
,
document.getElementById('root')
)
MIT (http://www.opensource.org/licenses/mit-license.php)
See LICENSE attached.