You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-addons-create-fragment

Package Overview
Dependencies
3
Maintainers
5
Versions
63
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-addons-create-fragment


Version published
Maintainers
5
Created

Changelog

Source

15.6.2 (September 25, 2017)

All Packages

  • Switch from BSD + Patents to MIT license

React DOM

  • Fix a bug where modifying document.documentMode would trigger IE detection in other browsers, breaking change events. (@aweary in #10032)
  • CSS Columns are treated as unitless numbers. (@aweary in #10115)
  • Fix bug in QtWebKit when wrapping synthetic events in proxies. (@walrusfruitcake in #10115)
  • Prevent event handlers from receiving extra argument in development. (@aweary in #10115)
  • Fix cases where onChange would not fire with defaultChecked on radio inputs. (@jquense in #10156)
  • Add support for controlList attribute to allowed DOM properties (@nhunzaker in #9940)
  • Fix a bug where creating an element with a ref in a constructor did not throw an error in development. (@iansu in #10025)

Readme

Source

react-addons-create-fragment

Note: This is a legacy React addon, and is no longer maintained.

We don't encourage using it in new code, but it exists for backwards compatibility.
The recommended migration path is to use arrays with explicit keys on individual elements.

Importing

import createFragment from 'react-addons-create-fragment'; // ES6
var createFragment = require('react-addons-create-fragment'); // ES5 with npm

If you prefer a <script> tag, you can get it from React.addons.createFragment with:

<!-- development version -->
<script src="https://unpkg.com/react-addons-create-fragment/react-addons-create-fragment.js"></script>

<!-- production version -->
<script src="https://unpkg.com/react-addons-create-fragment/react-addons-create-fragment.min.js"></script>

In this case, make sure to put the <script> tag after React.

Overview

In most cases, you can use the key prop to specify keys on the elements you're returning from render. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element.

That is, if you have a component such as:

function Swapper(props) {
  let children;
  if (props.swapped) {
    children = [props.rightChildren, props.leftChildren];
  } else {
    children = [props.leftChildren, props.rightChildren];
  }
  return <div>{children}</div>;
}

The children will unmount and remount as you change the swapped prop because there aren't any keys marked on the two sets of children.

To solve this problem, you can use the createFragment add-on to give keys to the sets of children.

Array<ReactNode> createFragment(object children)

Instead of creating arrays, we write:

import createFragment from 'react-addons-create-fragment';

function Swapper(props) {
  let children;
  if (props.swapped) {
    children = createFragment({
      right: props.rightChildren,
      left: props.leftChildren
    });
  } else {
    children = createFragment({
      left: props.leftChildren,
      right: props.rightChildren
    });
  }
  return <div>{children}</div>;
}

The keys of the passed object (that is, left and right) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.

The return value of createFragment should be treated as an opaque object; you can use the React.Children helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.

Keywords

FAQs

Package last updated on 26 Sep 2017

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc