loganarnett / react-dom-fragment Goto Github PK

View Code? Open in Web Editor NEW

A React Fragment that supports dangerously setting innerHTML

License: Creative Commons Zero v1.0 Universal

JavaScript 100.00%

react-dom-fragment's Introduction

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 patches DOM updates so that unchanged portions of your code won’t be re-created. Dynamic elements like video, images, and iframes will not reload, even as attributes update that do not change their source.

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" />' } />`
  }}
/>

Patching occurs at the deepest possible level without any container element so that even unchanged portions of Text Nodes are preserved.

<p>
  ...<Fragment dangerouslySetInnerHTML={{
    __html: Math.floor(Math.random() * 100)
  }} />...
</p>

/*
1st Pass (__html === 4):
  <p>
    "..."
    "4"
    "..."
  </p>

2nd Pass (__html === 45):
  <p>
    "..."
    "4"
    "5"
    "..."
  </p>

3rd Pass (__html === 50):
  <p>
    "..."
    "50"
    "..."
  </p>
*/

React DOM Fragment is still a React Fragment you can use 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>'
}} />