react-dot-fragment
v0.2.10
Published
Ponyfill for React 16's <React.Fragment> component
Downloads
18,246
Maintainers
benwiley4000Readme
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-fragmentexample
<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?
In the render method of our
Fragmentcomponent, wrap the thechildrenprop with a<div>After the component mounts, attach the child DOM nodes to our
<div>'s parent DOM nodeHide the
<div>from the DOM so it doesn't affect any layoutOn 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.