kentcdodds/raw-text-example.js

## raw-text-example.js
/**
 * In our app, we have a few middleware that generate a string of HTML.
 * On occassion it's fine to just use dangerouslySetInnerHTML directly for
 * those, but that requires that you have a host node for the innerHTML.
 *
 * In certain scenarios (like tags in <head />), there's HTML that we need
 * to insert directly where it is. This component enables that because
 * we replace <raw-text> and </raw-text> with empty strings. Effectively
 * making whatever's between <raw-text> and </raw-text> inlined in place.
 *
 * This is not something you should typically use, but it can be useful
 * on occassion.
 */
function RawText({ children }) {
  return <raw-text dangerouslySetInnerHTML={{ __html: children }} />
}

function App(props) {
  return (
    <html>
      <head>
        <RawText>{props.marketingAssets.headHTML}</RawText>
      </head>
      <body>{`... etc...`}</body>
    </html>
  )
}

function renderApp(props) {
  return `
    <!DOCTYPE html>
    ${ReactDOMServer.renderToStaticMarkup(<App {...props} />).replace(
      /<\/?raw-text>/g,
      '',
    )}
  `
}
	/**
	* In our app, we have a few middleware that generate a string of HTML.
	* On occassion it's fine to just use dangerouslySetInnerHTML directly for
	* those, but that requires that you have a host node for the innerHTML.
	*
	* In certain scenarios (like tags in <head />), there's HTML that we need
	* to insert directly where it is. This component enables that because
	* we replace <raw-text> and </raw-text> with empty strings. Effectively
	* making whatever's between <raw-text> and </raw-text> inlined in place.
	*
	* This is not something you should typically use, but it can be useful
	* on occassion.
	*/
	function RawText({ children }) {
	return <raw-text dangerouslySetInnerHTML={{ __html: children }} />
	}

	function App(props) {
	return (
	<html>
	<head>
	<RawText>{props.marketingAssets.headHTML}</RawText>
	</head>
	<body>{`... etc...`}</body>
	</html>
	)
	}

	function renderApp(props) {
	return `
	<!DOCTYPE html>
	${ReactDOMServer.renderToStaticMarkup(<App {...props} />).replace(
	/<\/?raw-text>/g,
	'',
	)}
	`
	}