https://github.com/birkir/react-children-addons

React Children Addons
https://github.com/birkir/react-children-addons

Last synced: 24 days ago
JSON representation

React Children Addons

• Host: GitHub
• URL: https://github.com/birkir/react-children-addons
• Owner: birkir
• License: mit
• Created: 2018-10-28T05:53:05.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-03T10:00:17.000Z (about 6 years ago)
• Last Synced: 2025-03-26T06:43:29.801Z (about 1 month ago)
• Language: TypeScript
• Size: 34.2 KB
• Stars: 7
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-children-addons - React Children Addons (TypeScript)

README

        
![](https://img.shields.io/npm/v/react-children-addons.svg?&style=flat-square) ![](https://img.shields.io/bundlephobia/min/react-children-addons.svg?&style=flat-square) ![](https://img.shields.io/npm/l/react-children-addons.svg?&style=flat-square) ![](https://img.shields.io/david/birkir/react-children-addons.svg?&style=flat-square)  ![](https://img.shields.io/npm/dw/react-children-addons.svg?&style=flat-square)

# react-children-addons

React children utilities and addons

```bash

npm install react-children-addons -S

# or

yarn add react-children-addons -S

```

## API Methods

 - [toFlatArray](#toflatarray)

 - [mapFlat](#mapflat)

### toFlatArray

Takes children and flattens all React.Fragments into a single array

```jsx

import { toFlatArray } from 'react-children-addons';

function List({ children }) {

  console.log(toFlatArray(children));

}

  
Item

  <>

    
Another Item

  >


```

```jsx

[
Item
, 
Another Item
]

```


### mapFlat

Same as `toFlatArray` but with a map function

```jsx

import React from 'react';

import { mapFlat } from 'react-children-addons';

function List({ children }) {

  return (

    


      {mapFlat(children, child => React.cloneElement(child, { className: 'link' }))}

    

  );

}


  
Item

  <>

    
Another Item

  >

  

    <>

      
Nested Item

    >

  


```

```html



  
Item

  
Another Item

  
Nested Item



```


## Todo

Add tests, changelog and more ideas for addons.