https://github.com/benwiley4000/react-dot-fragment

🦄 Use React 16's <React.Fragment> in React 15
https://github.com/benwiley4000/react-dot-fragment

dom fragment hacks polyfill ponyfill react

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/benwiley4000/react-dot-fragment
• Owner: benwiley4000
• License: mit
• Created: 2018-03-13T07:38:03.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T21:37:01.000Z (about 2 years ago)
• Last Synced: 2024-11-06T14:06:57.197Z (3 months ago)
• Topics: dom, fragment, hacks, polyfill, ponyfill, react
• Language: JavaScript
• Homepage: https://benwiley4000.github.io/react-dot-fragment/
• Size: 167 KB
• Stars: 21
• Watchers: 3
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-dot-fragment

This is a very simple ponyfill for React 16's [``](https://reactjs.org/docs/fragments.html) (a.k.a. `<>`) component which allows a component to return a set of children without a wrapper DOM element.

```bash

npm install react-dot-fragment

```

## example

([see a working example here](https://benwiley4000.github.io/react-dot-fragment/))

```html

  


```

```jsx

import React from 'react';

import ReactDOM from 'react-dom';

import Fragment from 'react-dot-fragment';

ReactDOM.render(

  

    
a

    
b

    
c

  ,

  document.querySelector('ul')

);

```


The DOM becomes:

```html

  


    
a

    
b

    
c

  


```

## how does it work?

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

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

3. Hide the `
` from the DOM so it doesn't affect any layout

3. On update:


    a. Move the elevated child nodes back inside the `
`


    b. Let React re-render

    c. Move the new child nodes back up to the `
`'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](https://github.com/benwiley4000/react-dot-fragment/issues/3)!

## contributing

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