html2react
package to your project:frontity.settings.js
file as one of the packages that will be part of the Frontity project:html
, and you'll usually pass post.content.rendered
to it:html2react
to detect specific portions of HTML and return custom HTML or React components.processors
field is an array where you can push all the processors you want to use with html2react
. You can check the default processors here.libraries.html2react.processors
. Here you can see as an example how this is done in mars-theme
:name
, priority
, test
,and processor
.name
priority
priority
of 10
will be applied before a processor with a priority
of 20
test
true
, this node will be passed down to the processor
functionprocessor
lazy-loading
to images, or just modifying some attributes, like adding target="_blank"
to the links.test
and the processor
functions receive the same arguments ({ node, root, state, libraries })
node
root
state
state
. This could be useful to use some parts of the state
inside your processor. For example, using your state.theme.colors
libraries
libraries
. As it happens with the state
, sometimes could be useful to access your libraries
as welltest
function returns a boolean to indicate processor
function should be executed (the node matches the pattern).processor
function returns a node
object.image
processor is implemented in html2react
:target="_blank"
to the <a>
tags with href starting with http
:node
received by both test
and processor
can be an Element
, a Text
or a Comment
. You can distinguish between them using node.type
.Element
is an HTML tag or a React component.Text
is a text content. For example, the text inside a <p>
tag.Comment
is just an HTML comment. Like this <!-- comment -->
.type
parent
element
(text
or comment
can't have children)ignore
ignore
to true
for a node, it won't pass any test
. This is useful in some situations when you don't want additional processors applied to this node.Element
nodes are also defined by the following properties:component
props
children
null
or an empty arrayprops
values (and their equivalent React props):class
-> className
style
-> css
srcset
-> srcSet
onclick
-> onClick
Text
and Comment
nodes will also have the following property:content
<script>
tags. For that reason, html2react doesnβt execute the script tags included in the contents.20
, processes <script>
tags found in the HTML for execution. <script>
type must either be application/javascript
, text/javascript
or application/ecmascript
to pass the test of the processor.<iframe>
tags found in the HTML.iframe
to the processors
array in your package index.js
file.libraries.html2react.processors
html2react
.libraries.html2react.Component
html