Gathering detailed insights and metrics for react-from-dom
Gathering detailed insights and metrics for react-from-dom
Gathering detailed insights and metrics for react-from-dom
Gathering detailed insights and metrics for react-from-dom
@eslint-react/eslint-plugin
A unified plugin that combines all individual plugins from the eslint-react monorepo into one.
react-router-dom-v5-compat
Migration path to React Router v6 from v4/5
react-dom-instance
Get react component instances from a DOM node
inferno-dom
Provides methods to render DOM nodes from Inferno elements
Convert HTML/XML source code or DOM nodes to React elements
npm install react-from-dom
Typescript
Module System
Node Version
NPM Version
TypeScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
29 Stars
71 Commits
5 Forks
2 Watchers
1 Branches
2 Contributors
Updated on Apr 10, 2025
Latest Version
0.7.5
Package Id
react-from-dom@0.7.5
Unpacked Size
128.29 kB
Size
24.39 kB
File Count
11
NPM Version
10.9.0
Node Version
22.12.0
Published on
Jan 14, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
26
Convert HTML/XML source code or a DOM node to a React element.
The perfect replacement for React's dangerouslySetInnerHTML
Install it
1npm install react-from-dom
Set a string with HTML/XML source code OR a DOM Node, which will be used to create React elements recursively.
1import React from 'react'; 2import convert from 'react-from-dom'; 3 4const panel = convert(` 5<div class="panel"> 6 <div class="panel-header"> 7 <h2>Title</h2> 8 </div> 9 <div class="panel-content"> 10 <ul> 11 <li>line 1</li> 12 <li>line 2</li> 13 </ul> 14 </div> 15 <div class="panel-footer"> 16 Footer 17 </div> 18</div> 19`); 20 21const audio = document.createElement('audio'); 22audio.setAttribute('controls', 'true'); 23audio.setAttribute( 24 'src', 25 'https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3', 26); 27const audioContent = document.createTextNode('Your browser does not support the audio element.'); 28audio.appendChild(audioContent); 29 30const audioElement = convert(audio); 31 32const App = () => ( 33 <div> 34 {panel} 35 {audioElement} 36 </div> 37);
The function accepts two parameters:
input string|Node
- required
An HTML/XML source code string or a DOM node.
options Options
Action[]
boolean
▶︎ falseboolean
▶︎ falsenodeOnly
is true)number
▶︎ 0number
▶︎ 0boolean
▶︎ falseboolean
▶︎ falsestring
▶︎ **body > ***document.querySelector
method.DOMParserSupportedType
▶︎ text/htmlYou can mutate/update a Node before the conversion or replace it with a ReactNode.
1{ 2 // If this returns true, the two following functions are called if they are defined 3 condition: (node: Node, key: string, level: number) => boolean; 4 5 // Use this to update or replace the node 6 // e.g. for removing or adding attributes, changing the node type 7 pre?: (node: Node, key: string, level: number) => Node; 8 9 // Use this to inject a component or remove the node 10 // It must return something that can be rendered by React 11 post?: (node: Node, key: string, level: number) => React.ReactNode; 12}
1{ 2 condition: node => node.nodeName.toLowerCase() === 'div', 3 pre: node => { 4 node.className += ' a-class-added'; 5 return node; 6 }, 7}
1{ 2 condition: node => node.className.indexOf('delete-me') >= 0, 3 post: () => null, 4}
1{ 2 condition: node => node.nodeName.toLowerCase() === 'pre', 3 post: (node, key) => ( 4 <ReactMarkdown key={key} source={node.textContent} /> 5 ), 6},
1{ 2 condition: node => node.nodeName.toLowerCase() === 'ul', 3 pre: (node) => { 4 const ol = document.createElement('ol'); 5 6 [...node.childNodes].forEach(child => { 7 ol.appendChild(child); 8 }); 9 10 return ol; 11 } 12}
If you need to support legacy browsers, you'll need to include a polyfiil for Number.isNaN
in your app.
This is a fork from the dom-to-react package. Thanks! ❤️
MIT
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 1
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 1/21 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
18 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More