Skip to content

Commit

Permalink
fix(16916): adds React fragment support for Switcher's direct child (#…
Browse files Browse the repository at this point in the history
…17008)

* fix(15337): fix release names in update automation

* fix(15337): fix release names in update automation

* fix(16916): added React fragment support for Switcher child

* docs: revert changes & adds usage docs for Switcher

* Format fix

* Update UsingFragmentsWithSwitcher.md

* chore: format fix

---------

Co-authored-by: Preeti Bansal <[email protected]>
  • Loading branch information
2nikhiltom and preetibansalui authored Sep 19, 2024
1 parent 7956f63 commit 72c80b3
Showing 1 changed file with 43 additions and 0 deletions.
43 changes: 43 additions & 0 deletions packages/react/docs/UsingFragmentsWithSwitcher.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
The `Switcher` component is designed to have `SwitcherItem` components as its
direct children. However, there may be cases where you want to use React
Fragments or other nested structures within the `Switcher`. To accommodate we
recommend using the [`react-keyed-flatten-children`]
(https://www.npmjs.com/package/react-keyed-flatten-children#react-keyed-flatten-children)
package.

### Using react-keyed-flatten-children

The `react-keyed-flatten-children` package allows you to flatten arrays and
React Fragments into a regular, one-dimensional array while preserving element
and fragment keys.

1. Install the package:

```
npm install react-keyed-flatten-children
```

2. Import and use in your component:

```jsx
import flattenChildren from 'react-keyed-flatten-children';

const YourComponent = () => (
<Switcher>
{flattenChildren(
<>
<SwitcherItem>Item 1</SwitcherItem>
<SwitcherItem>Item 2</SwitcherItem>
<>
<SwitcherItem>Item 3</SwitcherItem>
<SwitcherItem>Item 4</SwitcherItem>
</>
</>
)}
</Switcher>
);
```

This approach allows you to use Fragments and nested structures with components
like `<Switcher>` without modifying their source code. It preserves keys and
props, ensuring stable rendering across updates.

0 comments on commit 72c80b3

Please sign in to comment.