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

    348

    Version

    1.0.0

    License

    CC0-1.0

    Unpacked Size

    53.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • jonathantneal