# useScanGate

`useScanGate` decides when the scan is the whole page. A creator who has opened nothing yet sees the scan alone, with one button. When a scan has come to rest with something found, the video takes over, and it never goes back. `WrappedView` uses this hook when you set `opening.gate`. Reach for it when you build the page yourself.

> Live preview: try it at https://bettertyped.github.io/react-wrapped/docs/scanner/use-scan-gate/
>
> A page that opens on its scan. Find the scenes and the video takes over.

## Usage

```tsx
import { useOpenedDrops, useScanGate, YearScan } from "@react-wrapped/scan";

// With `gate`, the scan is the page until one run has come to rest with something found.
const { gated, onRunChange } = useScanGate({ enabled: gate, found: opened.length, id: cut.seed });
// The video takes the scan's place at the top, so that is where the page should be looking.
const rootRef = useRef<HTMLDivElement>(null);
const wasGated = useRef(gated);
useLayoutEffect(() => {
  if (wasGated.current && !gated) rootRef.current?.scrollIntoView({ block: "start" });
  wasGated.current = gated;
}, [gated]);
```

That is from the [from parts example](https://bettertyped.github.io/react-wrapped/examples/from-parts/). While `gated` is true it renders the scan in a box as tall as the video will be and nothing else. Afterwards it renders the player, the settings and the gallery, with the same scan under them.

## Options

| Option | Type | What it does |
| --- | --- | --- |
| `enabled` | `boolean` | Whether this Wrapped opens on its scan at all: someone's own year with drops in it, not an example. |
| `found` | `number` | How many drops have been found so far. |
| `id` | `string \| null` | Which Wrapped this is, such as its seed, so another year opened in the same place starts at its own scan. |
| `beat?` | `number` | Milliseconds the finished scan stays up before the video takes over. 900 unless you say. |

## What it returns

| Key | Type | What it is |
| --- | --- | --- |
| `gated` | `boolean` | True while the scan is the page. Render the scan alone, and pass this on as its `gate`. |
| `onRunChange` | `(running: boolean) => void` | Hand it to `YearScan`. It is how the hook knows a scan started or came to rest. |

## The rules it keeps

- The page stays the scan's while the scan it started is still going. The first find must not pull the layout out from under the ones after it.
- A scan stopped with nothing found leaves the scan as the page, ready to run again.
- A scan run later, under the video, never takes the page back.
- Someone who has already found something, on an earlier visit, goes straight to the video: read `found` from [`useOpenedDrops`](https://bettertyped.github.io/react-wrapped/docs/scanner/use-opened-drops/).

## Related

- [Scanner](https://bettertyped.github.io/react-wrapped/docs/scanner/)
- [YearScan](https://bettertyped.github.io/react-wrapped/docs/scanner/year-scan/)
- [useOpenedDrops](https://bettertyped.github.io/react-wrapped/docs/scanner/use-opened-drops/)
- [Build the page from parts](https://bettertyped.github.io/react-wrapped/docs/guides/from-parts/)

Source: https://bettertyped.github.io/react-wrapped/docs/scanner/use-scan-gate/