# useTrackReorder

> Reorders tracks: drag a track's grip to move it, with the view scrolling at its edges and a copy of its header under the pointer, or press Up and Down on the grip. With the grip, the copy and the line where the track would land.

```bash
npx shadcn@latest add @audio-ui/use-track-reorder
```

```ts
import { useTrackReorder } from "@/hooks/use-track-reorder";
```

- Files: `hooks/use-track-reorder.ts`, `components/audio-ui/track-grip.tsx`
- Depends on: `sortable-drag`; npm: nothing
- Used by: `arrangement-editor`, `arrangement-view`, `block-timeline`

| Export | Kind | What it is |
| --- | --- | --- |
| `TrackGhost` | interface | The copy of a track's header that follows the pointer: draw it fixed, at this box, with `ref` on it. |
| `useTrackReorder` | function | Reorders the tracks of a timeline: drag a track's grip to move it, or press Up or Down on it. |

## Usage

`useTrackReorder` moves tracks: give each track a grip, and drag the grip, or press Up or Down on it. The copy of the dragged track's header follows the pointer, the others slide aside, and the view scrolls at its edges, with no render while it moves (`sortable-drag`). The grip and the copy are `TrackGrip` and `TrackReorderGhost`, installed with it.

It is one of the parts the [Arrangement](/docs/components/base/arrangement) composes.

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `order` | `string[]` |  | The tracks' ids, top to bottom. |
| `onMove` | `(id, index) => void` |  | A track was dropped at `index`. |
| `gripProps(id)` | `props` |  | For a track's grip: its pointer and key handlers. |
| `draggingId` | `string \| null` |  | The track dragged. |
| `ghost, ghostRef` | `{ id, top, left, width, height } \| null, Ref` |  | The copy to draw under the pointer, and the ref it takes. |
| `TrackGrip` | `dragging, trackName, ...gripProps(id)` |  | The grip, down the left edge of a track's header. |
| `TrackReorderGhost` | `ghost, ghostRef, trackName` |  | The copy of the dragged track's header under the pointer. |