Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-addons-create-fragment
Advanced tools
Changelog
15.6.2 (September 25, 2017)
document.documentMode
would trigger IE detection in other browsers, breaking change events. (@aweary in #10032)onChange
would not fire with defaultChecked
on radio inputs. (@jquense in #10156)controlList
attribute to allowed DOM properties (@nhunzaker in #9940)Readme
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.
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.
FAQs
Unknown package
The npm package react-addons-create-fragment receives a total of 127,657 weekly downloads. As such, react-addons-create-fragment popularity was classified as popular.
We found that react-addons-create-fragment demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.