{"id":15643189,"url":"https://github.com/gregberge/react-flatten-children","last_synced_at":"2025-09-20T08:32:49.156Z","repository":{"id":65449604,"uuid":"151150346","full_name":"gregberge/react-flatten-children","owner":"gregberge","description":"React utility to flatten fragments 🗜","archived":false,"fork":false,"pushed_at":"2020-07-27T14:28:33.000Z","size":429,"stargazers_count":59,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-18T08:08:40.136Z","etag":null,"topics":["children","flatten","fragment","react","utility"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gregberge.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gregberge"}},"created_at":"2018-10-01T19:56:22.000Z","updated_at":"2024-05-08T20:41:18.000Z","dependencies_parsed_at":"2023-01-25T02:45:38.922Z","dependency_job_id":null,"html_url":"https://github.com/gregberge/react-flatten-children","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Freact-flatten-children","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Freact-flatten-children/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Freact-flatten-children/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Freact-flatten-children/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregberge","download_url":"https://codeload.github.com/gregberge/react-flatten-children/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233494174,"owners_count":18684608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["children","flatten","fragment","react","utility"],"created_at":"2024-10-03T11:59:25.063Z","updated_at":"2025-09-20T08:32:43.827Z","avatar_url":"https://github.com/gregberge.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gregberge"],"categories":[],"sub_categories":[],"readme":"# react-flatten-children\n\n[![License](https://img.shields.io/npm/l/react-flatten-children.svg)](https://github.com/gregberge/react-flatten-children/blob/master/LICENSE)\n[![npm package](https://img.shields.io/npm/v/react-flatten-children/latest.svg)](https://www.npmjs.com/package/react-flatten-children)\n[![Build Status](https://img.shields.io/travis/gregberge/react-flatten-children.svg)](https://travis-ci.org/gregberge/react-flatten-children)\n[![DevDependencies](https://img.shields.io/david/dev/gregberge/react-flatten-children.svg)](https://david-dm.org/gregberge/react-flatten-children?type=dev)\n\nReact utility to flatten fragments 🗜\n\n```sh\nnpm install react-flatten-children\n```\n\n## Example\n\n```js\nimport React from \"react\";\nimport { Switch as BaseSwitch } from \"react-router\";\nimport flattenChildren from \"react-flatten-children\";\nimport PublicHome from \"./PublicHome\";\nimport PrivateHome from \"./PrivateHome\";\nimport Account from \"./Account\";\nimport Login from \"./Login\";\n\n// Create a fragment ready Switch\nconst Switch = ({ children }) =\u003e (\n  \u003cBaseSwitch\u003e{flattenChildren(children)}\u003c/BaseSwitch\u003e\n);\n\nconst Routes = ({ isLoggedIn }) =\u003e (\n  \u003cSwitch\u003e\n    {isLoggedIn ? (\n      \u003c\u003e\n        \u003cRoute exact path=\"/\" component={PrivateHome} /\u003e\n        \u003cRoute path=\"/account\" component={Account} /\u003e\n      \u003c/\u003e\n    ) : (\n      \u003c\u003e\n        \u003cRoute exact path=\"/\" component={PublicHome} /\u003e\n        \u003cRoute path=\"/login\" component={Login} /\u003e\n      \u003c/\u003e\n    )}\n    \u003cRoute path=\"/about\" component={About} /\u003e\n    \u003cRedirect to=\"/\" /\u003e\n  \u003c/Switch\u003e\n);\n\nexport default Routes;\n```\n\n👉 [Checkout an interactive example on CodeSandbox](https://codesandbox.io/s/nn6l3r30k0)\n\n## Why?\n\nIn many cases you have to introspect children, it can be to [use the first route matching a path](https://reacttraining.com/react-router/web/api/Switch), extract the label of a tab, or another use case.\n\nReact considers fragments as children, even if it is in fact a group of children. This package flattens children and makes your component API compatible with fragments. Users expect your library to be compatible with fragments. If you want to avoid tons of issues (see https://github.com/ReactTraining/react-router/issues/5917, https://github.com/ReactTraining/react-router/issues/5785), you should use it!\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Freact-flatten-children","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregberge%2Freact-flatten-children","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Freact-flatten-children/lists"}