# useOpenedDrops

`useOpenedDrops` keeps the list of drops a viewer has opened. Give it a storage key and the list is remembered on this device, so someone who ran the scan last week gets their full video today. Give it `null` and the list lasts for this visit only, which is what an example page wants.

> Live preview: try it at https://bettertyped.github.io/react-wrapped/docs/scanner/use-opened-drops/
>
> This scan keeps its finds with `useOpenedDrops(null)`: reload and they are gone.

## Usage

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

export function useMyDrops(handle: string, rolledAt: string) {
  // One key per person and per roll, so a new roll starts with nothing opened.
  const { opened, open, ready } = useOpenedDrops(`orbit-wrapped:${handle}:${rolledAt}`);
  return { opened, open, ready };
}
```

Pass `opened` to the scan as `found` and `open` as `onOpen`, and build your scenes from `opened`. That is the whole loop.

## What it returns

| Key | Type | What it is |
| --- | --- | --- |
| `opened` | `readonly string[]` | The ids opened so far, in the order they were opened. |
| `open` | `(id: string) => void` | Adds an id and writes the list to storage. An id already there is ignored. |
| `ready` | `boolean` | True once storage has been read. Before that, `opened` is empty for everyone. |

## Good to know

- The list is stored in local storage as a JSON array under your key.
- Storage is read before the first paint. With [scan first](https://bettertyped.github.io/react-wrapped/docs/scanner/) on, someone who opened everything last week never sees the gate flash by.
- Blocked or full storage is not an error. The drops are opened for this visit and can be opened again next time.
- Opening is one way. There is no close: a drop cannot be hidden again from here.
- On the server and in the first render `opened` is empty. Wait for `ready` before you decide what to show.

The hook is small on purpose. To keep opened drops in your database, skip it: any `found` list and any `onOpen` function work with the scan.

## Related

- [YearScan](https://bettertyped.github.io/react-wrapped/docs/scanner/year-scan/)
- [Scanner](https://bettertyped.github.io/react-wrapped/docs/scanner/)
- [Rarity and drops](https://bettertyped.github.io/react-wrapped/docs/scanner/drops/)
- [Server rendering](https://bettertyped.github.io/react-wrapped/docs/guides/server-rendering/)

Source: https://bettertyped.github.io/react-wrapped/docs/scanner/use-opened-drops/