diff --git a/packages/react/docs/UsingFragmentsWithSwitcher.md b/packages/react/docs/UsingFragmentsWithSwitcher.md new file mode 100644 index 000000000000..e4aaacf0878b --- /dev/null +++ b/packages/react/docs/UsingFragmentsWithSwitcher.md @@ -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 = () => ( + + {flattenChildren( + <> + Item 1 + Item 2 + <> + Item 3 + Item 4 + + + )} + + ); + ``` + +This approach allows you to use Fragments and nested structures with components +like `` without modifying their source code. It preserves keys and +props, ensuring stable rendering across updates.