Light

benwiley4000 / react-dot-fragment Goto Github PK

View Code? Open in Web Editor NEW

21.0 3.0 2.0 171 KB

🦄 Use React 16's <React.Fragment> in React 15

Home Page: https://benwiley4000.github.io/react-dot-fragment/

License: MIT License

JavaScript 100.00%

ponyfill react polyfill fragment dom hacks

react-dot-fragment's Introduction

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?

In the render method of our Fragment component, wrap the the children prop with a <div>
After the component mounts, attach the child DOM nodes to our <div>'s parent DOM node
Hide the <div> from the DOM so it doesn't affect any layout
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.

react-dot-fragment's People

Contributors

Stargazers

Watchers

Forkers

albertvision apiportaljenkinks

react-dot-fragment's Issues

Using react-dot-fragment causes re-renders

Using this package causes re-renders and as a result input fields lose focus

Codepen with issue: https://codepen.io/anon/pen/BbYMYj
Codepen using React.Fragment: https://codepen.io/anon/pen/WmMPBO

Does this work with other React-like libs like Preact, Inferno, etc?

I'm curious if that is compatible with Preact and Inferno and so on.

In theory it should work if React is aliased 🤔

Re-rendering doesn't work

This one was overlooked! 😮

Support non-web platforms

The use of the DOM api to polyfill fragment means this isn't usable on other platforms.

Use Babel

This way we don't have to worry about old browsers not supporting this or uglifiers throwing a fit.

Remove wrapper after all children has unwrapped

Suggestion:
I think we should remove wrapper itself, after all children has been unwrapped

Problem:

Possible solution:

_proto.unwrapChildren = function unwrapChildren() {
    var _this2 = this;

    // defer first to style calculation to ensure CSS transitions can happen:
    // https://stackoverflow.com/a/24195559/4956731
    setTimeout(function () {
      // plain js rocks!
      // https://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/
      if (!_this2.div.parentNode) {
        return;
      }

      _this2.saveFocusedDescendantElement(_this2.div);

      _this2.orphans = [];

      while (_this2.div.firstChild) {
        _this2.orphans.push(_this2.div.firstChild);

        _this2.div.parentNode.insertBefore(_this2.div.firstChild, _this2.div);
      }

      _this2.restoreFocusedDescendantElement();

      _this2.div.remove();  // <- Something like this
    });
  };

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs