https://github.com/Deschtex/html2react

A utility for turning raw HTML into React elements.
https://github.com/Deschtex/html2react

html html2react react

Last synced: 4 months ago
JSON representation

A utility for turning raw HTML into React elements.

• Host: GitHub
• URL: https://github.com/Deschtex/html2react
• Owner: Deschtex
• License: mit
• Created: 2016-06-17T09:35:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-17T09:03:48.000Z (about 7 years ago)
• Last Synced: 2024-08-13T22:17:06.545Z (4 months ago)
• Topics: html, html2react, react
• Language: JavaScript
• Homepage:
• Size: 80.1 KB
• Stars: 43
• Watchers: 5
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# HTML2React

[![Build Status](https://img.shields.io/travis/Deschtex/html2react.svg?style=flat-square)](https://travis-ci.org/Deschtex/html2react)

[![npm version](https://img.shields.io/npm/v/html2react.svg?style=flat-square)](https://www.npmjs.com/package/html2react)

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](https://facebook.github.io/react/tips/dangerously-set-inner-html.html), then you can simply pass it to `html2react`:

```javascript

import React from 'react'

import { render } from 'react-dom'

import HTML2React from 'html2react'

const html = `

  
Foo

  
Bar

  
Baz

`


render(

  


    {HTML2React(html)}

  
,

  document.getElementById('root')

)

```


**Note:** All attributes but [event handlers](https://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects) 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](https://facebook.github.io/react/docs/reusable-components.html), using nothing but [CSS selectors](https://www.w3.org/TR/css3-selectors/#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 = `

  
Foo

  
Bar

  
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 = `

  

Foo

  
Bar

  
Baz

  
Qux

`

const content = HTML2React(html, {

  'a.external': ExternalLink,

  'p:nth-of-type(3)': (props) => 
,

  a: Link

})


render(

  


    {content}

  
,

  document.getElementById('root')

)

```


## License

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

See [LICENSE](LICENSE) attached.