@engie-group/fluid-design-system-react/src/utils/slots.ts

Fluid Design System React

import {
  Children,
  cloneElement,
  isValidElement,
  PropsWithChildren,
  ReactElement,
  ReactNode
} from 'react';

export function extractChild(element: ReactNode) {
  const elementAsReactElement = element as ReactElement<PropsWithChildren>;
  if (!isValidElement(element) || !Children.count(elementAsReactElement.props.children)) {
    throw new Error(`Invalid element. Impossible to extract child`);
  }

  return elementAsReactElement.props.children;
}

export function updateChild(element: ReactNode, child: ReactNode): ReactElement<PropsWithChildren> {
  if (!isValidElement(element)) {
    throw new Error(`Invalid element. Impossible to update child`);
  }

  return cloneElement(element as ReactElement<PropsWithChildren>, {
    children: child
  });
}