# useSlots
> Extracts specific child component types into named slots.

Extracts specific child component types into named slots while collecting unmatched children separately.

## Import

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

## Example

```jsx
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>;
```

---

## API reference

### Arguments

| Name       | Type         | Default | Description                                      | Required |
| ---------- | ------------ | ------- | ------------------------------------------------ | -------- |
| `children` | `ReactNode`  | `—`     | The children to process and extract slots from.  | Yes      |
| `config`   | `SlotConfig` | `—`     | An object mapping slot names to component types. | Yes      |

### Returns

`[slots: Partial<SlotElements>, rest: ReactNode[]]` — A tuple where `slots` contains matched children keyed by slot name, and `rest` contains unmatched children.