# useOpenedCards

`useOpenedCards` is the list of opened card ids, kept in local storage under a key you choose. It is the simplest thing to hand `useCardOpening` when the cards are not worth a database row. Every read and write fails soft: at worst a card can be opened again, it can never change.

## Usage

```tsx
import { useCardOpening, useOpenedCards } from "@react-cards-opening/core";

const { opened, open, reset, ready } = useOpenedCards(`deal:${userId}:${dealtAt}`);
const hunt = useCardOpening({ cards, opened, onOpen: open });
```

## Key it by the deal

The key should change when the cards do: who they are for, and when they were dealt. A new deal then starts unopened without anything being cleared. Pass `null` for a deal that should be forgotten on reload, like a demo.

## What it returns

| Field | Type | What it is |
| --- | --- | --- |
| `opened` | `readonly string[]` | Ids opened so far, in the order they were opened. |
| `open` | `(id: string) => void` | Marks one opened. Safe to call twice. |
| `reset` | `() => void` | Forgets all of them, here and in storage. |
| `ready` | `boolean` | False until storage has been read. |

## Wait for ready

Storage is read in a layout effect, before the first paint. A page that shows unopened cards first should still wait for `ready`, or someone who opened everything last week sees the unopened state on the server's HTML.

```tsx
if (!ready) return <Skeleton />;
return opened.length === cards.length ? <Collection /> : <Hunt />;
```

## When the server should know

Local storage is per device. If opened cards have to follow an account, keep `opened` in your own state and write to your API from `onOpen`. [Keep opened cards](https://bettertyped.github.io/react-cards-opening/docs/guides/keep-opened-cards/) shows both.

## Related

- [Keep opened cards](https://bettertyped.github.io/react-cards-opening/docs/guides/keep-opened-cards/)
- [useCardOpening](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/)
- [Hiding places](https://bettertyped.github.io/react-cards-opening/docs/core/spots/)
- [Server rendering](https://bettertyped.github.io/react-cards-opening/docs/guides/server-rendering/)

Source: https://bettertyped.github.io/react-cards-opening/docs/core/use-opened-cards/