File tree Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Original file line number Diff line number Diff line change
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.
You can’t perform that action at this time.
0 commit comments