ElvixRegion
Single-frame wizard for the user's regional preferences singleton: country cascade plus tap-to-edit on every derived field.
"use client";import { ElvixRegion } from "@elvix.is/sdk/react";export default function RegionPane() {return (<ElvixRegiononChange={(region) => {// Fires on every refresh and after every successful PATCH.// `region` is null until the user picks a country.console.log("region now", region?.country, region?.locale);}}onResult={(r) => {if (!r.ok) return console.warn(r.error, r.message);// Safe to read: country + locale only. Other derived fields// (timezone, currency, formats) flow through onChange.console.log("saved", r.country, r.locale);}}/>);}
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
height | number | optional | min(540px, 66dvh) | Fixed pixel height for the in-frame card. Omit to inherit the responsive default. |
minHeight | number | optional | — | Minimum pixel height when height is not set. |
maxHeight | number | optional | — | Maximum pixel height when height is not set. |
width | number | string | optional | "100%" | Card width. Numbers are treated as pixels, strings pass through. |
onChange | (region: RegionRecord | null) => void | optional | — | Mirrors the full RegionRecord on every refresh and after every successful PATCH. Null until the user picks a country. |
onResult | (r: ElvixRegionResult) => void | optional | — | Terminal save callback. Discriminated union: narrow on r.ok before reading r.country and r.locale. Safe metadata only. |
Country edit is the only field that triggers a confirm pane, because it cascades into every derived field (UI locale, time zone, currency, time and date format, number format, measurement, first day of the week). The other field edits PATCH in place without confirmation.
Use onResult for toast or analytics (terminal save only). Use onChange for live mirroring into local state, since it keeps firing on every refresh including initial load.
Related
ElvixLanguages
Single-frame wizard for spoken languages and CEFR proficiency, capped at 8 with tap-to-edit and delete-confirm.
ReadElvixIdentityForm
Hosted profile editor: name, locale, timezone, pronouns, contact. Plugs straight into the elvix User record. In-frame edit → confirm → done lifecycle.
Read