Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-dom-fragment

1.0.0 • Public • Published

React DOM Fragment React DOM Fragment

npm version build status support chat

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.

Install

npm i react-dom-fragment

DownloadsWeekly Downloads

351

Version

1.0.0

License

CC0-1.0

Unpacked Size

53.1 kB

Total Files

11

Last publish

Collaborators

  • avatar