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.
Your year is hiding 4 scenes.
Achievements you earned and a few easter eggs. Each one joins your video when the scan finds it.
- Still hidden
- Still hidden
- Still hidden
- Still hidden
This scan keeps its finds with `useOpenedDrops(null)`: reload and they are gone.
Usage
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 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
openedis empty. Wait forreadybefore 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.
