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.
@artsy/react-html-parser
Advanced tools
Readme
NOTE: This Artsy fork replaces the htmlparser2 dependency with the DOMParser
API provided by modern browsers. As such,
the nodes that you get to operate on have a slightly different API.
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 @artsy/react-html-parser
# or
yarn add @artsy/react-html-parser
import React from 'react';
import ReactHtmlParser, {
processNodes,
convertNodeToElement
} 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
DOMParser
The transform function will be called for every node that is parsed by the library.
function transform(node, index)
return 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.nodeType === Node.ELEMENT_NODE && node.tagName === '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.nodeType === Node.ELEMENT_NODE && node.tagName === 'B') {
return <div>This was a bold tag</div>;
}
}
Allows pre-processing the nodes generated from the html by DOMParser
before being passed to the library and converted to React elements.
function preprocessNodes(nodes)
nodes
: The entire node tree generated by DOMParser
.The preprocessNodes
function should return a valid DOMParser
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.nodeType === Node.ELEMENT_NODE && node.tagName === 'UL') {
node.name = 'ol';
return convertNodeToElement(node, index, transform);
}
}
FAQs
Parse HTML into React components
The npm package @artsy/react-html-parser receives a total of 221 weekly downloads. As such, @artsy/react-html-parser popularity was classified as not popular.
We found that @artsy/react-html-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 open source maintainers 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.