{"_id":"react-keyed-flatten-children","_rev":"2822122","name":"react-keyed-flatten-children","description":"Flattens React children and fragments to an array with predictable and stable keys","dist-tags":{"latest":"1.3.0"},"maintainers":[{"name":"grrowl","email":"tom@chillidonut.com"}],"time":{"modified":"2022-09-06T14:22:13.000Z","created":"2019-11-20T08:44:28.846Z","1.3.0":"2020-08-04T02:30:00.044Z","1.2.0":"2020-02-03T02:51:50.013Z","1.1.0":"2019-11-22T11:25:11.735Z","1.0.1":"2019-11-20T08:45:34.294Z","1.0.0":"2019-11-20T08:44:28.846Z"},"users":{},"author":{"name":"Tom McKenzie","email":"tom@chillidonut.com"},"repository":{"type":"git","url":"git+https://github.com/grrowl/react-keyed-flatten-children.git"},"versions":{"1.3.0":{"name":"react-keyed-flatten-children","version":"1.3.0","description":"Flattens React children and fragments to an array with predictable and stable keys","main":"index.js","homepage":"https://github.com/grrowl/react-keyed-flatten-children","repository":{"type":"git","url":"git+https://github.com/grrowl/react-keyed-flatten-children.git"},"scripts":{"build":"tsc","test":"ts-node node_modules/tape/bin/tape *.spec.tsx","prepublishOnly":"npm run build"},"keywords":["react","fragment","flatten","children","utility"],"author":{"name":"Tom McKenzie","email":"tom@chillidonut.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.11","@types/react-is":"^16.7.1","@types/react-test-renderer":"^16.9.1","@types/tape":"^4.2.33","prettier":"^1.19.1","react":"^16.12.00","react-test-renderer":"^16.12.0","tape":"^4.11.0","ts-node":"^8.5.2","typescript":"^3.9.7"},"dependencies":{"react-is":"^16.8.6"},"peerDependencies":{"react":">=15.0.0"},"gitHead":"b39eb00b0115ae6a202b426893db87efb368d5a4","bugs":{"url":"https://github.com/grrowl/react-keyed-flatten-children/issues"},"_id":"react-keyed-flatten-children@1.3.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"shasum":"38d171582c6358909f430648a7a7d094aebae42a","size":3687,"noattachment":false,"key":"/react-keyed-flatten-children/-/react-keyed-flatten-children-1.3.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-keyed-flatten-children/download/react-keyed-flatten-children-1.3.0.tgz"},"maintainers":[{"name":"grrowl","email":"tom@chillidonut.com"}],"_npmUser":{"name":"grrowl","email":"tom@chillidonut.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-keyed-flatten-children_1.3.0_1596508199905_0.9097405407063162"},"_hasShrinkwrap":false,"publish_time":1596508200044,"_cnpm_publish_time":1596508200044,"_cnpmcore_publish_time":"2021-12-16T15:50:26.968Z"},"1.2.0":{"name":"react-keyed-flatten-children","version":"1.2.0","description":"Flattens React children and fragments to an array with predictable and stable keys","main":"index.js","homepage":"https://github.com/grrowl/react-keyed-flatten-children","repository":{"type":"git","url":"git+https://github.com/grrowl/react-keyed-flatten-children.git"},"scripts":{"build":"tsc","test":"ts-node node_modules/tape/bin/tape *.spec.tsx","prepublishOnly":"npm run build"},"keywords":["react","fragment","flatten","children","utility"],"author":{"name":"Tom McKenzie","email":"tom@chillidonut.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.11","@types/react-is":"^16.7.1","@types/react-test-renderer":"^16.9.1","@types/tape":"^4.2.33","prettier":"^1.19.1","react":"^16.12.00","react-test-renderer":"^16.12.0","tape":"^4.11.0","ts-node":"^8.5.2","typescript":"^3.7.2"},"dependencies":{"react-is":"^16.8.6"},"peerDependencies":{"react":">=15.0.0"},"gitHead":"08bfe98bb795a5696a03afd6ccbbb95837e645df","bugs":{"url":"https://github.com/grrowl/react-keyed-flatten-children/issues"},"_id":"react-keyed-flatten-children@1.2.0","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"shasum":"44c741f9f5acca1a7294c3f7a11f1d31c417c1e1","size":3643,"noattachment":false,"key":"/react-keyed-flatten-children/-/react-keyed-flatten-children-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-keyed-flatten-children/download/react-keyed-flatten-children-1.2.0.tgz"},"maintainers":[{"name":"grrowl","email":"tom@chillidonut.com"}],"_npmUser":{"name":"grrowl","email":"tom@chillidonut.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-keyed-flatten-children_1.2.0_1580698309925_0.4412931993650113"},"_hasShrinkwrap":false,"publish_time":1580698310013,"_cnpm_publish_time":1580698310013,"_cnpmcore_publish_time":"2021-12-16T15:50:27.153Z"},"1.1.0":{"name":"react-keyed-flatten-children","version":"1.1.0","description":"Flattens React children and fragments to an array with predictable and stable keys","main":"index.js","homepage":"https://github.com/grrowl/react-keyed-flatten-children","repository":{"type":"git","url":"git+https://github.com/grrowl/react-keyed-flatten-children.git"},"scripts":{"build":"tsc","test":"ts-node node_modules/tape/bin/tape *.spec.tsx","prepublishOnly":"npm run build"},"keywords":["react","fragment","flatten","children","utility"],"author":{"name":"Tom McKenzie","email":"tom@chillidonut.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.11","@types/react-is":"^16.7.1","@types/react-test-renderer":"^16.9.1","@types/tape":"^4.2.33","prettier":"^1.19.1","react":"^16.12.00","react-test-renderer":"^16.12.0","tape":"^4.11.0","ts-node":"^8.5.2","typescript":"^3.7.2"},"dependencies":{"react-is":"^16.8.6"},"peerDependencies":{"react":">=15.0.0"},"gitHead":"7a22d157c98eace0f12b0861efde772d5fea8bea","bugs":{"url":"https://github.com/grrowl/react-keyed-flatten-children/issues"},"_id":"react-keyed-flatten-children@1.1.0","_nodeVersion":"12.8.0","_npmVersion":"6.10.2","dist":{"shasum":"1d9a1eb6aa9df5e90e3f71e31cade2fc616fee65","size":3659,"noattachment":false,"key":"/react-keyed-flatten-children/-/react-keyed-flatten-children-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-keyed-flatten-children/download/react-keyed-flatten-children-1.1.0.tgz"},"maintainers":[{"name":"grrowl","email":"tom@chillidonut.com"}],"_npmUser":{"name":"grrowl","email":"tom@chillidonut.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-keyed-flatten-children_1.1.0_1574421911615_0.3107154766704099"},"_hasShrinkwrap":false,"publish_time":1574421911735,"_cnpm_publish_time":1574421911735,"_cnpmcore_publish_time":"2021-12-16T15:50:27.367Z"},"1.0.1":{"name":"react-keyed-flatten-children","version":"1.0.1","description":"Flattens React children and fragments to an array with predictable and stable keys","main":"index.js","homepage":"https://github.com/grrowl/react-keyed-flatten-children","repository":{"type":"git","url":"git+https://github.com/grrowl/react-keyed-flatten-children.git"},"scripts":{"build":"tsc","test":"ts-node node_modules/tape/bin/tape *.spec.tsx","prepublishOnly":"npm run build"},"keywords":["react","fragment","flatten","children","utility"],"author":{"name":"Tom McKenzie","email":"tom@chillidonut.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.11","@types/react-is":"^16.7.1","@types/react-test-renderer":"^16.9.1","@types/tape":"^4.2.33","prettier":"^1.19.1","react":"^16.12.00","react-test-renderer":"^16.12.0","tape":"^4.11.0","ts-node":"^8.5.2","typescript":"^3.7.2"},"dependencies":{"react-is":"^16.8.6"},"peerDependencies":{"react":">=15.0.0"},"gitHead":"e5b98826f2f4d7c3d2dda43d9358a9e98a754787","bugs":{"url":"https://github.com/grrowl/react-keyed-flatten-children/issues"},"_id":"react-keyed-flatten-children@1.0.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"42b6b2977e79d53fa3b84583ea0115de77c87a5d","size":3403,"noattachment":false,"key":"/react-keyed-flatten-children/-/react-keyed-flatten-children-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-keyed-flatten-children/download/react-keyed-flatten-children-1.0.1.tgz"},"maintainers":[{"name":"grrowl","email":"tom@chillidonut.com"}],"_npmUser":{"name":"grrowl","email":"tom@chillidonut.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-keyed-flatten-children_1.0.1_1574239534197_0.9585884802024329"},"_hasShrinkwrap":false,"publish_time":1574239534294,"_cnpm_publish_time":1574239534294,"_cnpmcore_publish_time":"2021-12-16T15:50:27.598Z"},"1.0.0":{"name":"react-keyed-flatten-children","version":"1.0.0","description":"Flattens React children and fragments to an array with predictable and stable keys","main":"index.js","homepage":"https://github.com/grrowl/react-keyed-flatten-children","repository":{"type":"git","url":"git+https://github.com/grrowl/react-keyed-flatten-children.git"},"scripts":{"build":"tsc","test":"ts-node node_modules/tape/bin/tape *.spec.tsx","prepublishOnly":"npm run build"},"keywords":["react","fragment","flatten","children","utility"],"author":{"name":"Tom McKenzie","email":"tom@chillidonut.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.11","@types/react-is":"^16.7.1","@types/react-test-renderer":"^16.9.1","@types/tape":"^4.2.33","prettier":"^1.19.1","react":"^16.12.00","react-test-renderer":"^16.12.0","tape":"^4.11.0","ts-node":"^8.5.2","typescript":"^3.7.2"},"dependencies":{"react-is":"^16.8.6"},"peerDependencies":{"react":">=15.0.0"},"gitHead":"4e9fe4773789c79d401f5abb5a40b1077a05e0dc","bugs":{"url":"https://github.com/grrowl/react-keyed-flatten-children/issues"},"_id":"react-keyed-flatten-children@1.0.0","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"shasum":"ef26e5d891b3fd5f1018b49ee1af401ca0618ee6","size":3186,"noattachment":false,"key":"/react-keyed-flatten-children/-/react-keyed-flatten-children-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-keyed-flatten-children/download/react-keyed-flatten-children-1.0.0.tgz"},"maintainers":[{"name":"grrowl","email":"tom@chillidonut.com"}],"_npmUser":{"name":"grrowl","email":"tom@chillidonut.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-keyed-flatten-children_1.0.0_1574239468690_0.8615838891906991"},"_hasShrinkwrap":false,"publish_time":1574239468846,"_cnpm_publish_time":1574239468846,"_cnpmcore_publish_time":"2021-12-16T15:50:27.797Z"}},"readme":"# react-keyed-flatten-children\n\n[](https://travis-ci.org/grrowl/react-keyed-flatten-children)\n\nSimilar 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.\n\n## getting started\n\n```\nnpm install react-keyed-flatten-children\n```\n\n```\nyarn add react-keyed-flatten-children\n```\n\n## why?\n\nFrom the documentation of Children.toArray:\n\n> [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.\n\nUnfortunately it has some thorny edges:\n\n- [Children.toArray does not traverse into fragments](https://github.com/facebook/react/issues/6889), which limits flexibility of its use.\n- 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.\n- 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).\n\nSome 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\n\n[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.\n\n### for using this in your app\n\nI'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).\n\n### for library authors\n\nIn most cases `react-keyed-flatten-children` is a drop-in replacement for `Children.toArray`.\n\n```jsx\nimport flattenChildren from \"react-keyed-flatten-children\";\n\nconst MenuList = ({ children }) => {\n const [selectedKey, setSelectedKey] = useState(null);\n\n return (\n \n {flattenChildren(props.children).map(child => {\n if (child.type === MenuItem) {\n return React.cloneElement(child, {\n selected: child.key === selectedKey,\n onClick: () => setSelectedKey(child.key)\n });\n }\n return child;\n })}\n
\n );\n};\n```\n\nNow consumers can use arrays, fragments, or conditionally render items and your library will continue to work predictably.\n\n```jsx\n\n Animals
\n \n \n\n Cars
\n {CARS_ARRAY.map(car => (\n \n ))}\n\n {isLoggedIn() && (\n <>\n User
\n \n \n \n )\n\n```\n\n### for everyone else\n\nWork around libraries which don't support fragments passed into children.\n\n```jsx\nimport flattenChildren from \"react-keyed-flatten-children\";\nimport { Switch, Route } from \"react-router\";\n\n// A looks through its children , but won't match within fragments.\n// will flatten out its children so is able to see all children.\nconst FlexibleSwitch = ({ children }) => (\n {flattenChildren(children)}\n);\n\nconst AppRoutes = ({ user }) => (\n \n \n \n \n \n \n {user && (\n <>\n \n \n \n \n \n \n \n )}\n \n \n \n \n \n);\n```\n\n## license\n\nMIT\n","_attachments":{},"homepage":"https://github.com/grrowl/react-keyed-flatten-children","bugs":{"url":"https://github.com/grrowl/react-keyed-flatten-children/issues"},"license":"MIT"}