https://github.com/redradix/react-children-xt
Count and map over React children flattening fragments and not taking into account elements that won't be rendered such as `undefined` or `null`
https://github.com/redradix/react-children-xt
children fragment react
Last synced: 3 months ago
JSON representation
Count and map over React children flattening fragments and not taking into account elements that won't be rendered such as `undefined` or `null`
- Host: GitHub
- URL: https://github.com/redradix/react-children-xt
- Owner: redradix
- Created: 2023-03-24T12:04:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-27T10:31:19.000Z (over 2 years ago)
- Last Synced: 2025-06-28T05:44:56.315Z (3 months ago)
- Topics: children, fragment, react
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSES/MIT.txt
Awesome Lists containing this project
README
# react-children-xt
> Count and map over React children flattening fragments and not taking into account elements that won't be rendered such as `undefined` or `null`
## Why to use it
On one hand, accessing directly to `children.length` or `children.map` doesn't works as expected when receiving a single child, as it is not encapsulated in an array. The solution may be to use `React.Children.count` and `React.Children.map` but this may also have an unexpected behaviour when treating as valid children elements that won't be rendered such as `undefined` or `null`.
Moreover, sometimes we need to flatten `Fragment`s and treat its content as direct children of the Component so this package does it by default. It is possible to disable this behaviour passing `false` as the last argument of the methods.
## Installation
```
npm install --save react-children-xt
```
or
```
yarn add react-children-xt
```
## Usage
```jsx
import React from 'react'
import { countChildren, mapChildren } from 'react-children-xt'
function MyParentComponent() {
return (
One
{undefined}
{null}
Two
<>
Three
Four
>
)
}
function MyComponent({ children }) {
// Native way to count React children.
// It counts the two main `div`s, `undefined`, `null` and the `Fragment`.
const badChildrenCount = React.Children.count(children)
console.log(badChildrenCount) // output: 5
// Using `countChildren` method.
// It counts the four `div`s, flattening the `Fragment`.
const childrenCount = countChildren(children)
console.log(childrenCount) // output: 4
// Using `countChildren` method without flattening the `Fragment`.
// It counts the two main `div`s and the `Fragment`.
const mainChildrenCount = countChildren(children, false)
console.log(mainChildrenCount) // output: 3
// `MyComponent` will render the four `div`s.
return (
<>
{mapChildren(children, (child, index) => (
{child}
))}
>
)
}
```