zomars/DangerousRawHtml.jsx

## README.md

      
    Raw
  

              README.md
            
          
    I know this is a hack but for my use case this allows me to inject arbitrary html inside head tags:
const DangerousRawHtml = ({ html = "" }) => (
  <script dangerouslySetInnerHTML={{ __html: `</script>${html}<script>` }} />
);
Usage:
const EmailHead = ({ title = "" }) => {
  return (
    <head>
      <title>{title}</title>
      <DangerousRawHtml html={`<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->`} />
    </head>
  )
}
The output will leave some empty script tags along the way which is not optimal but it works:
<html>
  <head>
    <title>Title</title>
    <script></script>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <script></script>
  </head>
  <body></body>
</html>
Also if you're planning to use renderToStaticMarkup, you can do this to cleanup the empty scripts:
ReactDOMServer.renderToStaticMarkup(<MyRootComponent />)
  // Remove `<DangerousRawHtml />` injected scripts
  .replace(/<script><\/script>/g, "")

  
## DangerousRawHtml.jsx
export const DangerousRawHtml = ({ html = "" }) => (
  <script dangerouslySetInnerHTML={{ __html: `</script>${html}<script>` }} />
);
	export const DangerousRawHtml = ({ html = "" }) => (
	<script dangerouslySetInnerHTML={{ __html: `</script>${html}<script>` }} />
	);