Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-html-parser
Advanced tools
Changelog
Readme
A utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.
npm install react-html-parser
# or
yarn add react-html-parser
import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
class HtmlComponent extends React.Component {
render() {
const html = '<div>Example HTML string</div>';
return <div>{ ReactHtmlParser(html) }</div>;
}
}
function ReactHtmlParser(html, [options])
Takes an HTML string and returns equivalent React elements
import ReactHtmlParser from 'react-html-parser';
html
: The HTML string to parseoptions
: Options object
htmlparser2
The transform function will be called for every node that is parsed by the library.
function transform(node, index)
node
: The node being parsed. This is the htmlparser2 node object. Full details can be found on their project page but important properties are:
type
(string): The type of node (tag, text, style etc)name
(string): The name of the nodechildren
(array): Array of children nodesnext
(node): The node's next siblingprev
(node): The node's previous siblingparent
(node): The node's parentdata
(string): The text content, if the type
is textindex
(number): The index of the node in relation to it's parentreturn null
Returning null will prevent the node and all of it's children from being rendered.
function transform(node) {
// do not render any <span> tags
if (node.type === 'tag' && node.name === 'span') {
return null;
}
}
return undefined
If the function does not return anything, or returns undefined, then the default behaviour will occur and the parser will continue was usual.
return React element
React elements can be returned directly
import React from 'react';
function transform(node) {
if (node.type === 'tag' && node.name === 'b') {
return <div>This was a bold tag</div>;
}
}
Allows pre-processing the nodes generated from the html by htmlparser2
before being passed to the library and converted to React elements.
function preprocessNodes(nodes)
nodes
: The entire node tree generated by htmlparser2
.The preprocessNodes
function should return a valid htmlparser2
node tree.
function convertNodeToElement(node, index, transform)
Processes a node and returns the React element to be rendered. This function can be used in conjunction with the previously described transform
function to continue to process a node after modifying it.
import { convertNodeToElement } from 'react-html-parser';
node
: The node to processindex
(number): The index of the node in relation to it's parenttransform
: The transform function as described aboveimport { convertNodeToElement } from 'react-html-parser';
function transform(node, index) {
// convert <ul> to <ol>
if (node.type === 'tag' && node.name === 'ul') {
node.name = 'ol';
return convertNodeToElement(node, index, transform);
}
}
htmlparser2
The library exposes the htmlparser2
library it uses. This allows consumers
to use it without having to add it as a separate dependency.
See https://github.com/fb55/htmlparser2 for full details.
FAQs
Parse HTML into React components
The npm package react-html-parser receives a total of 241,765 weekly downloads. As such, react-html-parser popularity was classified as popular.
We found that react-html-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.