Client State

State maintained in the browser/application.

html

<div class="clst">
  <div class="clst__browser" style="border-color:#BFD9F2;">
    <p class="clst__chrome">Browser tab</p>
    <code class="clst__var">sidebarOpen = true</code>
  </div>
  <p class="clst__note">Lives only in this tab's memory &mdash; refresh the page and it resets; the server never sees it.</p>
</div>
<style>
.clst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.clst__browser { border: 2px solid; border-radius: 10px; padding: 12px; }
.clst__chrome { margin: 0 0 8px; font-size: 10px; color: #24143099; text-transform: uppercase; letter-spacing: .04em; }
.clst__var { display: block; font: 12px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; }
.clst__note { margin: 10px 0 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <div class="border-2 rounded-[10px] p-3" style="border-color:#BFD9F2;">
    <p class="m-0 mb-2 text-[10px] text-[#24143099] uppercase tracking-wide">Browser tab</p>
    <code class="block font-mono text-xs bg-[#24143012] py-2 px-2.5 rounded-md">sidebarOpen = true</code>
  </div>
  <p class="mt-2.5 text-[10px] text-[#24143099]">Lives only in this tab's memory &mdash; refresh the page and it resets; the server never sees it.</p>
</div>

react

export function ClientState({
  stateKey = "sidebarOpen",
  value = "true",
  accent = "#BFD9F2",
  showNote = true,
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ border: `2px solid ${accent}`, borderRadius: 10, padding: 12 }}>
        <p style={{ margin: "0 0 8px", fontSize: 10, color: "#24143099", textTransform: "uppercase", letterSpacing: ".04em" }}>Browser tab</p>
        <code style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 12, background: "#24143012", padding: "8px 10px", borderRadius: 6 }}>{stateKey} = {value}</code>
      </div>
      {showNote && <p style={{ margin: "10px 0 0", fontSize: 10, color: "#24143099" }}>Lives only in this tab's memory &mdash; refresh the page and it resets; the server never sees it.</p>}
    </div>
  );
}