New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-dot-fragment

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dot-fragment

Ponyfill for React 16's <React.Fragment> component

  • 0.2.10
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.9K
decreased by-13.25%
Maintainers
1
Weekly downloads
 
Created
Source

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.

Keywords

FAQs

Package last updated on 07 Feb 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc