<html2react>
package that, among other things, contains a function that is executed if a certain test condition evaluates as true. The test condition is used to match elements (or nodes) in the HTML markup of the content. The processor function will in some way process or alter the markup of that element and return either the modified markup or even something else in it's place.test
and processor
are functions.test
the function simply returns a boolean value depending on whether a condition is matched. The condition checks against each node in the DOM tree. Normally it will test whether a node has a particular HTML tag or a particular class, or other property.true
if the received node (i.e. an HTML element) is an <img>
tag. For all other elements in the DOM tree it will return false
.processor
property is a function that in some way "processes" the received node (remember that a node is a JavaScript object representing an HTML element). It can return a modified version of the element or something entirely different, such as a React compontent. This returned value will replace the original element in the DOM tree.processor
function is dependent on the value returned by the test
function. The processor
function will only be executed if the test
function returns true
, therefore the processor
function will only operate on nodes that match the test
condition.processor
function will only be executed if the element being tested by the test
function is an <img>
, and it will then process that element in a defined way.Html2React
component (an improved version of React's dangerouslySetInnerHTML
) provided by the @frontity/html2react
package is that you can add processors to parse all the HTML rendered by this componentmars-theme
or twentytwenty-theme
then the html2react
package is already installed and you don't need to follow these steps.html2react
package into your theme@frontity/html2react
to the packages
array in frontity.settings.js
html2react
from the libraries
object, which must be passed via props to the component connected via connect
.dangerouslySetInnerHTML
, passing it an html
prop with the content that you wish to be rendered - this will usually be post.content.rendered
.html2react
component to render the HTML for the post/page content the test
function will be evaluated for each element in the DOM tree and the processor
function will execute and process that element if the test on that node passes, i.e. returns true
.libraries.html2react.processors
in the theme's index.js
.image
, iframe
, and link
, are included with Frontity, and if you are using a ready-made theme such as @frontity/mars-theme
or @frontity/twentytwenty-theme
then they will already be added for you.html2react
component and a specific condition, as defined by the test
function, is met. The condition is specified by a pattern, such as a specific element type which has a specific class. For example:processor
and the test
, receive the node (i.e. a JavaScript object representing an HTML element) as a prop. They also receive the other properties of the Frontity object, i.e. root
, state
and libraries
.<blockquote>
element with a React component../processors/quote.js
. This file also includes the React component <Quote>
that will replace any <blockquote>
element that also has the class wp-block-quote
. However, a more complex example might import this from a separate file.processor
function extracts certain sub-parts of the <blockquote>
element and passes them as props to the <Quote>
component. The processor
function also returns the HTML returned by the <Quote>
component.quote
processor is exported.quote
processor is then imported into our theme's index.js
file:<Html2React>
component to render the content, as follows: