# react-from-dom
> Convert HTML/XML source code or DOM nodes to React elements
Latest version **0.7.5** (published 2025-01-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-from-dom
pnpm add react-from-dom
yarn add react-from-dom
bun add react-from-dom
```
## Health
**Score 40/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.7.5 |
| Published | 2025-01-14 |
| First published | 2019-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 128.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Gil Barbara |
| Maintainers | gilbarbara |
| Keywords | string, DOM, converter, react, component, dangerouslySetInnerHTML |
## Links
- npm: https://www.npmjs.com/package/react-from-dom
- Repository: https://github.com/gilbarbara/react-from-dom
- Homepage: https://github.com/gilbarbara/react-from-dom#readme
- Issues: https://github.com/gilbarbara/react-from-dom/issues
- npm.io page: https://npm.io/package/react-from-dom
## 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.7.5 (latest) — 2025-01-14
- 0.7.4 — 2025-01-14
- 0.7.3 — 2024-03-07
- 0.7.2 — 2024-02-28
- 0.7.1 — 2024-02-28
- 0.7.0 — 2024-02-27
- 0.6.2 — 2022-04-13
- 0.6.1 — 2021-07-09
- 0.6.0 — 2021-02-18
- 0.5.1 — 2020-12-13
- 0.5.0 — 2020-09-29
- 0.4.2 — 2020-06-21
- 0.4.1 — 2020-06-19
- 0.4.0 — 2020-06-18
- 0.3.1 — 2020-01-10
- … 6 more at https://npm.io/package/react-from-dom/versions
## README
# react-from-dom
[](https://www.npmjs.com/package/react-from-dom) [](https://github.com/gilbarbara/react-from-dom/actions/workflows/main.yml) [](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-from-dom) [](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-from-dom)
Convert HTML/XML source code or a DOM node to a React element.
The perfect replacement for React's `dangerouslySetInnerHTML`
## Setup
Install it
```shell-script
npm install react-from-dom
```
## Getting Started
Set a string with HTML/XML source code OR a DOM Node, which will be used to create React elements recursively.
```jsx
import React from 'react';
import convert from 'react-from-dom';
const panel = convert(`
`);
const audio = document.createElement('audio');
audio.setAttribute('controls', 'true');
audio.setAttribute(
'src',
'https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3',
);
const audioContent = document.createTextNode('Your browser does not support the audio element.');
audio.appendChild(audioContent);
const audioElement = convert(audio);
const App = () => (
{panel}
{audioElement}
);
```
## API
The function accepts two parameters:
**input** `string|Node` - *required*
An HTML/XML source code string or a DOM node.
**options** `Options`
- **actions** `Action[]`
An array of actions to modify the nodes before converting them to ReactNodes.
*Read about them below.*
- **allowWhiteSpaces** `boolean` ▶︎ **false**
Don't remove white spaces in the output.
- **includeAllNodes** `boolean` ▶︎ **false**
Parse all nodes instead of just a single parent node.
This will return a ReactNode array (or a NodeList if `nodeOnly` is true)
- **Index** `number` ▶︎ **0**
The index to start the React key identification.
- **level** `number` ▶︎ **0**
The level to start the React key identification.
- **nodeOnly** `boolean` ▶︎ **false**
Return the node (or NodeList) without converting it to a ReactNode.
*Only used for string inputs.*
- **randomKey** `boolean` ▶︎ **false**
Add a random key to the root element.
- **selector** `string` ▶︎ **body > ***
The selector to use in the `document.querySelector` method.
*Only used for string inputs.*
- **type** `DOMParserSupportedType` ▶︎ **text/html**
The mimeType to use in the DOMParser's parseFromString.
*Only used for string inputs.*
### Actions
You can mutate/update a Node before the conversion or replace it with a ReactNode.
```tsx
{
// If this returns true, the two following functions are called if they are defined
condition: (node: Node, key: string, level: number) => boolean;
// Use this to update or replace the node
// e.g. for removing or adding attributes, changing the node type
pre?: (node: Node, key: string, level: number) => Node;
// Use this to inject a component or remove the node
// It must return something that can be rendered by React
post?: (node: Node, key: string, level: number) => React.ReactNode;
}
```
#### Examples
##### Add a class to all elements that match.
```javascript
{
condition: node => node.nodeName.toLowerCase() === 'div',
pre: node => {
node.className += ' a-class-added';
return node;
},
}
```
##### Remove all elements with a specific class.
```javascript
{
condition: node => node.className.indexOf('delete-me') >= 0,
post: () => null,
}
```
##### Return a react component for some node types.
```javascript
{
condition: node => node.nodeName.toLowerCase() === 'pre',
post: (node, key) => (
),
},
```
##### Transform one node into another and preserve the child nodes.
```javascript
{
condition: node => node.nodeName.toLowerCase() === 'ul',
pre: (node) => {
const ol = document.createElement('ol');
[...node.childNodes].forEach(child => {
ol.appendChild(child);
});
return ol;
}
}
```
## Browser Support
If you need to support legacy browsers, you'll need to include a polyfiil for `Number.isNaN` in your app.
## Credits
This is a fork from the [dom-to-react](https://github.com/diva-e/dom-to-react) package. Thanks! ❤️
## License
MIT
---
_Source: https://npm.io/package/react-from-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._