codeTabsSync
Why JS.
import { codeTabsSync } from "@sdxc/ui/docs";Usage
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
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 | Required | Description |
|---|---|---|---|
syncKey | string | Yes | The key the tab sets share. |
persist | "cookie" | "local" | "none" | Yes | Where the choice is remembered between pages. |
Examples
<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).
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.
codeTabsStorageKey(syncKey: string): string| Parameter | Type | Required | Description |
|---|---|---|---|
syncKey | string | Yes | 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.
readCodeTabsCookie(cookieHeader: string | null | undefined, syncKey: string): string | undefined| Parameter | Type | Required | Description |
|---|---|---|---|
cookieHeader | string | null | undefined | Yes | The request's Cookie header, or nothing when none was sent. |
syncKey | string | Yes | The key the tab sets share. |
<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.
type CodeTabsPersistence = "cookie" | "local" | "none"