# useMarquee

> A selection rectangle for the clips of a timeline: drag across bare lane (with Shift, or in a multi-select mode) and the clips it touches join the selection

```bash
npx shadcn@latest add @audio-ui/use-marquee-selection
```

```ts
import { useMarquee } from "@/hooks/use-marquee-selection";
```

- Files: `hooks/use-marquee-selection.ts`
- Depends on: nothing; npm: nothing
- Used by: `arrangement-editor`, `arrangement-view`, `block-timeline`

| Export | Kind | What it is |
| --- | --- | --- |
| `Marquee` | interface |  |
| `useMarquee` | function | A marquee for the clips: Shift and drag across bare lane draws a rectangle, and the clips it touches join the selection. |

## Usage

A marquee for the clips of a timeline: Shift and drag across bare lane draws a rectangle, and the clips it touches join the selection. Spread its `handlers` on the timeline's viewport and draw `rect`.

```tsx
import { useMarquee } from "@/hooks/use-marquee-selection";

const marquee = useMarquee(selectedIds, select, multi);

<TimelineViewport {...marquee.handlers}>
  {/* lanes */}
  {marquee.rect ? <div className="absolute border border-primary bg-primary/10" style={marquee.rect} /> : null}
</TimelineViewport>;
```

It is told the selection when the drag began, to add to it with `multi`, and reports the clips it touches as it grows.