react-keyed-flatten-children - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

package.json

 {
   "name": "react-keyed-flatten-children",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Flattens React children and fragments to an array with predictable and stable keys",
@@ -39,3 +39,3 @@ "main": "index.js",
     "ts-node": "^8.5.2",
-    "typescript": "^3.7.2"
+    "typescript": "^3.9.7"
   },
@@ -42,0 +42,0 @@ "dependencies": {

README.md

@@ -5,3 +5,3 @@ # react-keyed-flatten-children
 
-Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray), this utility takes children and returns them as an array for introspection or filtering. Different from `toArray`, it will ensure element keys are unique, preserved, and stable between renders, and traverses into fragments and maintains their keys, too.
+Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray), this utility takes children and returns them as an array for introspection or filtering. Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders.
 
@@ -22,10 +22,12 @@ ## getting started
 
-> Returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.
+> [toArray] returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.
 
 Unfortunately it has some thorny edges:
 
-- [Children.toArray does not return a flat array of all children](https://github.com/facebook/react/issues/6889), skipping Fragments by design.
-- Existing solutions exist, but they do not key the children they return, so you throw away valuable baked-in performance opportunities provided through stable keys.
-- You're probably doing something a little wild anyway, so you want the concept of "children" to as predictable as possible for you, and for the consumers of your library or component, [to avoid issues like this down the line](https://github.com/ReactTraining/react-router/issues/5785#issuecomment-351067856).
+- [Children.toArray does not traverse into fragments](https://github.com/facebook/react/issues/6889), which limits flexibility of its use.
+- Existing solutions exist, but they do not preserve the keys of the children and fragments, which throws away valuable performance optimisations provided through React keys.
+- You're might be doing something a little wild, so you want the concept of "children" to as predictable as possible for you, and for the consumers of your library or component, [to avoid issues like this down the line](https://github.com/ReactTraining/react-router/issues/5785#issuecomment-351067856).
 
+Some have proposed, soon after Fragments were introduced, that [a built-in `React.Children.toFlatArray` would be useful](https://github.com/reactjs/rfcs/pull/61), but
+
 [View the codesandbox here](https://codesandbox.io/s/react-keyed-flatten-children-example-yghsp) to get hands-on with how and when to utilise this module.
@@ -35,7 +37,7 @@
 
-I've written a more straightforward, userland-focussed explanation in my article ["Fixing Children.toArray's thorny edges"](https://tommckenzie.dev/posts/react-keyed-flatten-children.html).
+I've written a more application-focussed explanation in my article ["Addressing Children.toArray's thorny edges"](https://tommckenzie.dev/posts/react-keyed-flatten-children.html).
 
 ### for library authors
 
-`react-keyed-flatten-children` is a drop-in replacement for `Children.toArray`. In this example, instead of needing to rely on the child's array index, we can reference the key:
+In most cases `react-keyed-flatten-children` is a drop-in replacement for `Children.toArray`.
 
@@ -42,0 +44,0 @@ ```jsx

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7933

increased by1.61%

Number of lines in readme file

128

increased by1.59%

No dependency changes