I am seeking guidance regarding the usage of the html-to-react library.
Consider the following html string:
'<div>
<img src="test.png" style="width: 100px;"/>
<img src="test2.png" style="margin: 0px 4px;"/>
</div>'
Normally, this would be parsed as shown below:
import {Parser} from 'html-to-react'
const reactElement = Parser.parse(htmlString);
As a result, a React element with a div
and 2 nested img
elements would be generated.
Is there a way to parse this string in a manner where each img
is substituted with a custom Image
component while maintaining the original props and attributes of the img
(including styles)?
For example, the resulting react element would contain the following children:
<div>
<Image src="test.png" style={{width: 100}}/>
<Image src="test2.png" style={{margin: "0px 4px"}}/>
</div>
Your assistance is greatly appreciated! Thank you.