# codeTabsSync

> Why JS: a reader who picks Bun in one set of code tabs expects every set sharing that choice to switch, on this page and the next; radios only know their own group.

```ts
import { codeTabsSync } from "@sdxc/ui/docs";
```

Keeps every set of code tabs sharing `syncKey` on one choice. Attach it to an element
inside the set: on insertion it selects the remembered choice (a cached page was
rendered for whoever asked first), and each switch is stored and mirrored into the
other sets on the page. With `local` storage, other browser tabs follow too.

## Signature

```ts
codeTabsSync(syncKey: string, persist: CodeTabsPersistence): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for an element inside the set's `[data-code-tabs]` root.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `syncKey` | `string` | The key the tab sets share. |
| `persist` | `"cookie" \| "local" \| "none"` | Where the choice is remembered between pages. |

## Examples

```tsx
<span hidden mix={[codeTabsSync("package-manager", "cookie")]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/docs` too.

### CODE_TABS_ATTRIBUTE

Attribute every set of code tabs carries, holding its sync key (empty when unsynced).

#### Signature

```ts
const CODE_TABS_ATTRIBUTE = "data-code-tabs"
```

### codeTabsStorageKey

The cookie and `localStorage` key a sync key's choice is stored under. A server that
renders the remembered choice reads the cookie by this name, or uses
readCodeTabsCookie.

#### Signature

```ts
codeTabsStorageKey(syncKey: string): string
```

Returns: The storage key, such as `ui-code-tabs.package-manager`.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `syncKey` | `string` | The key the tab sets share, such as `package-manager`. |

### readCodeTabsCookie

Reads the remembered choice for `syncKey` from a request's `Cookie` header, so the
server renders the reader's tab already selected and the page never flashes.

#### Signature

```ts
readCodeTabsCookie(cookieHeader: string | null | undefined, syncKey: string): string | undefined
```

Returns: The chosen tab's value, or `undefined` when the reader has not chosen.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `cookieHeader` | `string \| null \| undefined` | The request's `Cookie` header, or nothing when none was sent. |
| `syncKey` | `string` | The key the tab sets share. |

#### Examples

```tsx
<CodeTabs syncKey="package-manager" persist="cookie" selected={readCodeTabsCookie(request.headers.get("Cookie"), "package-manager")} … />
```

### CodeTabsPersistence

Where a set of code tabs remembers the reader's choice between pages.

#### Signature

```ts
type CodeTabsPersistence = "cookie" | "local" | "none"
```

One of `"cookie"`, `"local"`, `"none"`.