Skip to content

Commit 72c80b3

Browse files
fix(16916): adds React fragment support for Switcher's direct child (#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]>
1 parent 7956f63 commit 72c80b3

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
The `Switcher` component is designed to have `SwitcherItem` components as its
2+
direct children. However, there may be cases where you want to use React
3+
Fragments or other nested structures within the `Switcher`. To accommodate we
4+
recommend using the [`react-keyed-flatten-children`]
5+
(https://www.npmjs.com/package/react-keyed-flatten-children#react-keyed-flatten-children)
6+
package.
7+
8+
### Using react-keyed-flatten-children
9+
10+
The `react-keyed-flatten-children` package allows you to flatten arrays and
11+
React Fragments into a regular, one-dimensional array while preserving element
12+
and fragment keys.
13+
14+
1. Install the package:
15+
16+
```
17+
npm install react-keyed-flatten-children
18+
```
19+
20+
2. Import and use in your component:
21+
22+
```jsx
23+
import flattenChildren from 'react-keyed-flatten-children';
24+
25+
const YourComponent = () => (
26+
<Switcher>
27+
{flattenChildren(
28+
<>
29+
<SwitcherItem>Item 1</SwitcherItem>
30+
<SwitcherItem>Item 2</SwitcherItem>
31+
<>
32+
<SwitcherItem>Item 3</SwitcherItem>
33+
<SwitcherItem>Item 4</SwitcherItem>
34+
</>
35+
</>
36+
)}
37+
</Switcher>
38+
);
39+
```
40+
41+
This approach allows you to use Fragments and nested structures with components
42+
like `<Switcher>` without modifying their source code. It preserves keys and
43+
props, ensuring stable rendering across updates.

0 commit comments

Comments
 (0)