Skip to content
🦄 Use React 16's <React.Fragment> in React 15
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc
.gitattributes
.gitignore
.npmignore
LICENSE
README.md
index.html
index.js
package-lock.json
package.json

README.md

react-dot-fragment

This is a very simple ponyfill for React 16's <React.Fragment> (a.k.a. <>) component which allows a component to return a set of children without a wrapper DOM element.

npm install react-dot-fragment

example

(see a working example here)

<html>
<body>
  <ul></ul>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import Fragment from 'react-dot-fragment';

ReactDOM.render(
  <Fragment>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </Fragment>,
  document.querySelector('ul')
);

The DOM becomes:

<html>
<body>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</body>
</html>

how does it work?

  1. In the render method of our Fragment component, wrap the the children prop with a <div>

  2. After the component mounts, attach the child DOM nodes to our <div>'s parent DOM node

  3. Hide the <div> from the DOM so it doesn't affect any layout

  4. On update:

    a. Move the elevated child nodes back inside the <div>

    b. Let React re-render

    c. Move the new child nodes back up to the <div>'s parent node

rationale

You might want to use this for one of a couple of good reasons:

  • You have some code that needs to be tested in React 15, but it relies on React.Fragment.
  • You maintain a React library which supports React 16 features, but you want backward compatibility.

Generally, if you want to use React.Fragment, it's probably best to just upgrade to React 16.

compatibility

This module works with React 15 or later. It works in Node or in the browser.

Since the current solution relies on the DOM, this module is not compatible with React Native or other React platforms without access to the DOM API. If you would like to help us fix that, please open a PR!

contributing

Please feel free to open a pull request with test cases, bug fixes, or the like.

You can’t perform that action at this time.