# react-render-html

> Render HTML as React element, possibly replacing dangerouslySetInnerHTML

Latest version **0.6.0** (published 2017-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-render-html
pnpm add react-render-html
yarn add react-render-html
bun add react-render-html
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2017-11-10 |
| First published | 2015-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 213 |
| Author | Hyunje Jun |
| Maintainers | noraesae |
| Keywords | react, html |

## Links

- npm: https://www.npmjs.com/package/react-render-html
- Repository: https://github.com/utatti/react-render-html
- Homepage: https://github.com/utatti/react-render-html#readme
- Issues: https://github.com/utatti/react-render-html/issues
- npm.io page: https://npm.io/package/react-render-html

## Dependencies (2)

- [parse5](https://npm.io/package/parse5.md) ^3.0.2
- [react-attr-converter](https://npm.io/package/react-attr-converter.md) ^0.3.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.6.0 (latest) — 2017-11-10
- 0.5.2 — 2017-09-21
- 0.5.1 — 2017-09-16
- 0.5.0 — 2017-07-14
- 0.4.1 — 2017-07-12
- 0.4.0 — 2017-07-12
- 0.3.0 — 2017-07-06
- 0.2.0 — 2017-06-21
- 0.1.6 — 2016-08-31
- 0.1.5 — 2016-07-24
- 0.1.4 — 2016-06-09
- 0.1.3 — 2015-12-19
- 0.1.2 — 2015-12-19
- 0.1.1 — 2015-12-19
- 0.1.0 — 2015-12-19
- … 2 more at https://npm.io/package/react-render-html/versions

## README

# react-render-html [![travis-ci](https://travis-ci.org/utatti/react-render-html.svg)](https://travis-ci.org/utatti/react-render-html)

Render HTML as React element, possibly replacing dangerouslySetInnerHTML

## How it works

It renders a provided HTML string into a React element.

```js
import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")
// => React Element
//    <a className="github" href="https://github.com"><b>GitHub</b></a>
```

It may be used in the `render` method in a React component:

```js
let App = React.createClass({
  render() {
    return (
      <div className='app'>
        {renderHTML(someHTML)}
      </div>
    );
  }
});
```

Or just by itself
```js
ReactDOM.render(renderHTML(someHTML), document.getElementById('app'));
```

If a provided HTML contains several top-level nodes, the function will return
an array of React elements.

```js
renderHTML('<li>hello</li><li>world</li>');
// => [React Element <li>hello</li>, React Element <li>world</li>]
```

## Pros and cons

### Pros

- Can make use of React's reconciliation for plain HTML too
- Fully compatible with JSX

### Cons

- It uses [parse5](https://github.com/inikulin/parse5) to parse HTML, which can
  result in large bundle size
- Can result in slower rendering speed, mainly for parsing

## Install

Install with NPM:

```
npm i --save react-render-html
```

Import with CommonJS or whatever:

```js
const renderHTML = require('react-render-html');

import renderHTML from 'react-render-html';
```

## A bug!

When a bug is found, please report them in [Issues](https://github.com/utatti/react-render-html/issues).

Also, any form of contribution(especially a PR) will absolutely be welcomed :beers:

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/react-render-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._