# react-flatten-children

> React utility to flatten fragments.

Latest version **1.1.2** (published 2020-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-flatten-children
pnpm add react-flatten-children
yarn add react-flatten-children
bun add react-flatten-children
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-04-29 |
| First published | 2018-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Greg Bergé |
| Maintainers | neoziro |
| Keywords | react, utility, children, flatten, fragment |

## Links

- npm: https://www.npmjs.com/package/react-flatten-children
- Repository: https://github.com/gregberge/react-flatten-children
- Homepage: https://github.com/gregberge/react-flatten-children#readme
- Issues: https://github.com/gregberge/react-flatten-children/issues
- Funding: https://github.com/sponsors/gregberge
- npm.io page: https://npm.io/package/react-flatten-children

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2020-04-29
- 1.1.1 — 2020-04-29
- 1.1.0 — 2020-04-29
- 1.0.0 — 2018-10-01

## README

# react-flatten-children

[![License](https://img.shields.io/npm/l/react-flatten-children.svg)](https://github.com/gregberge/react-flatten-children/blob/master/LICENSE)
[![npm package](https://img.shields.io/npm/v/react-flatten-children/latest.svg)](https://www.npmjs.com/package/react-flatten-children)
[![Build Status](https://img.shields.io/travis/gregberge/react-flatten-children.svg)](https://travis-ci.org/gregberge/react-flatten-children)
[![DevDependencies](https://img.shields.io/david/dev/gregberge/react-flatten-children.svg)](https://david-dm.org/gregberge/react-flatten-children?type=dev)

React utility to flatten fragments 🗜

```sh
npm install react-flatten-children
```

## Example

```js
import React from "react";
import { Switch as BaseSwitch } from "react-router";
import flattenChildren from "react-flatten-children";
import PublicHome from "./PublicHome";
import PrivateHome from "./PrivateHome";
import Account from "./Account";
import Login from "./Login";

// Create a fragment ready Switch
const Switch = ({ children }) => (
  <BaseSwitch>{flattenChildren(children)}</BaseSwitch>
);

const Routes = ({ isLoggedIn }) => (
  <Switch>
    {isLoggedIn ? (
      <>
        <Route exact path="/" component={PrivateHome} />
        <Route path="/account" component={Account} />
      </>
    ) : (
      <>
        <Route exact path="/" component={PublicHome} />
        <Route path="/login" component={Login} />
      </>
    )}
    <Route path="/about" component={About} />
    <Redirect to="/" />
  </Switch>
);

export default Routes;
```

👉 [Checkout an interactive example on CodeSandbox](https://codesandbox.io/s/nn6l3r30k0)

## Why?

In 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.

React 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!

# License

MIT

---
_Source: https://npm.io/package/react-flatten-children · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._