useSlots

import { useSlots } from '@volue/wave-react';

const ComponentHeader = ({ children }) => <div>{children}</div>;
const ComponentFooter = ({ children }) => <div>{children}</div>;

function Component({ children }) {
  const [slots, rest] = useSlots(children, {
    header: ComponentHeader,
    footer: ComponentFooter
  });

  return (
    <div>
      {slots.header && <div className="header">{slots.header}</div>}
      <div className="body">{rest}</div>
      {slots.footer && <div className="footer">{slots.footer}</div>}
    </div>
  );
}

// Usage — Header and Footer go into slots, the rest becomes the body
<Component>
  <ComponentHeader>Title</ComponentHeader>
  <Text>Body content</Text>
  <Text>More body content</Text>
  <ComponentFooter>Footer info</ComponentFooter>
</Component>;