dom-parser-react's Introduction

DOMParserReact

A small parser that converts HTML to React using the DOMParser API.

Install

npm i dom-parser-react react
# or
yarn add dom-parser-react react

For use with Node.js (e.g., SSR / SSG), install jsdom additionally.

Usage

import React from 'react'
import DOMParserReact, { parse } from 'dom-parser-react'
// import { renderToStaticMarkup as render } from 'react-dom/server'

const App = () =>
  <DOMParserReact source="<h1>HTML Text</h1>" />

render(<App />) // `<h1>HTML Text</h1>`

// or

const contents = parse("<h1>HTML Text for parse API</h1>", {
  createElement: React.createElement,
  Fragment: React.Fragment,
})

render(<>{contents}</>) // `<h1>HTML Text</h1>`

Custom Components

import React from 'react'
import DOMParserReact from 'dom-parser-react'
// import { renderToStaticMarkup as render } from 'react-dom/server'

const Title = (props) =>
  <div className="title">
    <h1 {...props} />
  </div>

const App = () =>
  <DOMParserReact source="<h1>HTML Text</h1>" components={{ h1: Title }} />

render(<App />) // `<div class="title"><h1>HTML Text</h1></div>`

dom-parser-react's People

Contributors

Stargazers

Watchers

dom-parser-react's Issues

Doesn't parse correctly when the style contains `\\`

<div style="font-family: '\\';"></div> のスタイルが正しく解析されない。

expect(parseStyle('font-family: "\\\\";')).toStrictEqual({
  fontFamily: '"\\\\"',
})

expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Object {
-   "fontFamily": "\"\\\\\"",
+   "fontFamily": "\"\\\\\";",
  }

Recommend Projects