React DOM Fragment

React DOM Fragment lets you create React Fragments that support dangerously setting their innerHTML without a container element.

import Fragment from 'react-dom-fragment';

<Fragment dangerouslySetInnerHTML={{ __html: '<h1>No containers here</h1>' }} />

React DOM Fragment uses React Reconciliation so that unchanged portions of your HTML fragments aren’t recreated. Dynamic elements like video, images, and iframes will not reload, even as HTML around them changes.

import Fragment from 'react-dom-fragment';

<Fragment
  dangerouslySetInnerHTML={{
    __html: `<strong>${'Ever-changing description of this video'}</strong>:
      <iframe src="https://www.youtube.com/watch?v=oHg5SJYRHA0" />' } />`
  }}
/>

React DOM Fragment is still a React Fragment which means you can use it as a drop-in replacement.

<Fragment>
  <p>Lorem ipsum.</p>
  <p>Dolar sit amet.</p>
</Fragment>

Usage

Add React DOM Fragment to your project:

npm install react-dom-fragment

import Fragment from 'react-dom-fragment';

<Fragment>A regular fragment</Fragment>
<Fragment dangerouslySetInnerHTML={{
  __html: 'Content parsed as <strong>HTML</strong>'
}} />

React DOM Fragment will increase your bundle size by up to 1160 bytes when minified and gzipped.