How

npm i reactize-html or include it to packagejson

dependencies

no dependencies. Supposed to be used in Typescript applications only.

Why

Sometimes you need to render raw html as react components, or replace some html elements with your components instead of using old school stuff on that html (like attaching listeners, modifying html by hand via js, or god save use jquery). With this lib you can parse html to react elements and more.

Guide

For simply converting html to components:

HtmlToReactComponentsConverter.convert(htmlString)

For a more sophisticated stuff and logic, you should provide HtmlToReactComponentsConverter with ConversionConfiguration instance. With it you can:

• blacklist by tag //no elements with blacklisted tags will be skipped

you can provide a specific convert options for a specific tag:

• you can whitelist/blacklist attributes
• apply your own handler that can:
  • make some element igonred (not converted)
  • modify params/replace params
  • replace element with your provided element example:

let html = `
<div>
   <p data-badattribute="foo">
       hello
   </p>
   <p class="ignore">
       stupid    
   </p>
   <p style="color:red;">
       world!
   </p>
   <mycustomtag class="bar">
       foo
   </mycustomtag>
   <script>
       window.destroyWorld()
   </script>
</div>
`
let reactElements = HtmlToReactComponentsConverter.convert(html, new ConversionConfiguration({
   p: new ConvertOptionsBuilder()
       .blackListAttibutes('data-badattribute')
       .applyHandler(
           ((params, children) => {
               if (params['className'] === 'ignore') {
                   // will be ignored
                   return HandlerResult.ignore()
               }
               if (params['style'] && params.style['color'] === 'red') {
                   // element be created with this params
                   return HandlerResult.replaceParamsWith({style: {'color': 'purple'}})
               }
           })
       )
       .get(),
   mycustomtag: new ConvertOptionsBuilder()
       .applyHandler(
           ((params, children) => {
               const newParams = {
                   onClick: ()=>{alert('foo')},
                   key: params.key //do not forget to copy or provide a key!
               }
               // element be replaced with your provided component
               return HandlerResult.replaceWith(
                   <Button {...params}>bump</button>
               )
           })
       )
       .get(),
   blacklistedTags: ['script']
}))

//result same as:
`
<div key="somegenereatedkey">
   <p key="somegenereatedkey">
       hello
    </p key="somegenereatedkey">
    <p style={{color: 'purple'}} key="somegenereatedkey">
       world!
    </p>
    <button onClick={()=>{alert("foo")}} key="somegenereatedkey"> 
       alert
    </button>
</div>
`