# dom-parser-react

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

Latest version **0.4.0** (published 2026-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install dom-parser-react
pnpm add dom-parser-react
yarn add dom-parser-react
bun add dom-parser-react
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2026-08-22 |
| First published | 2021-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3 |
| Author | iMasanari |
| Maintainers | imasanari |
| Keywords | react, html, dom, parser, DOMParser |

## Links

- npm: https://www.npmjs.com/package/dom-parser-react
- Repository: https://github.com/iMasanari/dom-parser-react
- Homepage: https://github.com/iMasanari/dom-parser-react#readme
- Issues: https://github.com/iMasanari/dom-parser-react/issues
- npm.io page: https://npm.io/package/dom-parser-react

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2026-08-22
- 0.3.2 — 2026-02-05
- 0.3.1 — 2025-02-19
- 0.3.0 — 2023-01-22
- 0.2.2 — 2022-05-11
- 0.2.1 — 2021-11-30
- 0.2.0 — 2021-10-06
- 0.1.2 — 2021-09-24
- 0.1.1 — 2021-09-18
- 0.1.0 — 2021-09-18

## README

[![npm version](https://badge.fury.io/js/dom-parser-react.svg)](https://badge.fury.io/js/dom-parser-react)
[![Tests](https://github.com/iMasanari/dom-parser-react/actions/workflows/tests.yml/badge.svg)](https://github.com/iMasanari/dom-parser-react/actions/workflows/tests.yml)

# DOMParserReact

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

## Install

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

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

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

### Sanitize

DOMParserReact does not sanitize HTML. Please use text that has been sanitized beforehand.

```jsx
import DOMParserReact from 'dom-parser-react'
import DOMPurify from 'dompurify'

const sanitized = DOMPurify.sanitize(`<a href="javascript:alert('xxx')">HTML Text</a>`)

const App = () =>
  <DOMParserReact source={sanitized} />
```

## API

### `<DOMParserReact {...props} />`

HTML 文字列を React 要素に変換します。

#### Props

| Prop | Type | Description |
| :-- | :-- | :-- |
| `source` | `string` | 変換する HTML 文字列。 |
| `components?` | `Record<string, React.ComponentType> \| undefined` | HTML 要素を React コンポーネントで置き換えます。「Custom Components」参照。 |
| `domParser?` | `((source: string) => Document) \| undefined` | Document 変換に使われるパーサー。デフォルトでは `DOMParser` を使用した変換が行われ、サニタイズは実施されません。 |
| `createElement?` | `typeof React.createElement \| undefined` | `React.createElement` を変更する場合は指定してください。 |
| `Fragment?` | `React.ComponentType \| string \| undefined` | `React.Fragment` を変更する場合は指定してください。 |
| `deps?` | `unknown[]` | 変換結果のメモ化の依存配列。デフォルトは `[props.source]` です。 |

#### Returns

`JSX.Element`

`props.source` を React 変換した結果を返します。

#### Example

```jsx
import DOMParserReact from 'dom-parser-react'

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

### `parse(source, options)`

HTML 文字列を React 要素に変換します。

#### Paramaters

| Paramater | Type | Description |
| :-- | :-- | :-- |
| `source` | `string` | 変換する HTML 文字列。 |
| `options` | `object` | 変換設定。 |

#### Options

| Paramater | Type | Description |
| :-- | :-- | :-- |
| `createElement` | `typeof React.createElement` | `React.createElement` を指定してください。 |
| `Fragment` | `React.ComponentType \| string` | `React.Fragment` を指定してください。 |
| `components?` | `Record<string, React.ComponentType> \| undefined` | HTML 要素を React コンポーネントで置き換えます。「Custom Components」参照 |
| `domParser?` | `((source: string) => Document) \| undefined` | Document 変換に使われるパーサー。デフォルトでは `DOMParser` を使用した変換が行われ、サニタイズは実施されません。 |

#### Returns

`JSX.Element | string | null`

`source` を、`options` の内容で変換した結果を返します。

#### Example

```jsx
import React from 'react'
import { parse } from 'dom-parser-react'

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

### `getWindow()` from `dom-parser-react/window`

import 解決に `browser` condition がある状態（Next.jsでのブラウザ用出力コード等）はブラウザの `window`、それ以外の環境では `jsdom` の `window` を返します。

#### Returns

`Window`

ブラウザの `window`、または `jsdom` の `window`

#### Example

```jsx
import { getWindow } from 'dom-parser-react/window'
import DOMParserReact from 'dom-parser-react'

const sampleParser = (source) =>
  new (getWindow()).DOMParser().parseFromString(source, 'text/html')

const App = () =>
  <DOMParserReact source="<h1>HTML Text</h1>" domParser={sampleParser} />
```

## Note

`'dom-parser-react'` は、import 解決に `browser` condition がある状態（Next.js でのクライアント用出力コード等）はブラウザ用ソースコード、それ以外の場合では `jsdom` を使用したソースコードを使用します。  
import condition が使用できない場合や、Node.js であっても `jsdom` を使用したくない場合は、`'dom-parser-react/browser'` から import してください。

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