AutoRefresh
"Auto-refresh.
Updated
View code
<AutoRefresh
id="runs-refresh"
url={request.url}
frame="run-list"
refreshedAt={new Date()}
options={[
{ value: 0, label: "Off" },
{ value: 10, label: "10s" },
{ value: 30, label: "30s" },
{ value: 60, label: "1m" },
{ value: 300, label: "5m" },
]}
labels={{ trigger: "Auto-refresh", updated: "Updated {time}" }}
/>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { AutoRefresh } from "@sdxc/ui/app";Renders the interval menu and the last-updated time. Each menu item is a link, so a choice works without script and lands in the URL; the time island does the reloading.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Prefix for the menu id; unique on the page. |
url | URL | string | No | The page's current URL, which holds the choice. @default "/" |
name | string | No | The search parameter holding the interval. @default "refresh" |
value | number | No | The interval in force, overriding the URL, for a choice stored in a cookie. |
defaultValue | number | No | The interval while neither value nor the URL names one. @default 0 |
options | Option[] | No | The intervals offered, such as Off, 10s, 30s, 1m and 5m. |
hrefFor | (value: number) => string | No | Where choosing value leads; defaults to the URL with the parameter set (removed for the default). |
frame | string | No | The named frame to reload; unset reloads the page through its top frame. A name not on the page reloads nothing. |
refreshedAt | Date | No | When the list on screen was fetched. Defaults to the time of rendering. |
locale | string | No | Locale for the time. Defaults to the runtime's. |
timeZone | string | No | Time zone the server writes the first time in. Defaults to the runtime's. |
show | "all" | "choices" | "status" | No | Which half to draw: "all", the interval menu and the time; "choices", the intervals as a row of links for a menu that already has a trigger; "status", the time alone, which does the reloading, so a page drawing "choices" draws "status" too. |
labels | Labels | Yes |
Also accepts everything in Omit<TagProps<"div">, "children" | "id">.
Types
| Name | Values | What it decides |
|---|---|---|
Show | "all" | "choices" | "status" | The halves AutoRefresh can draw; see Props.show. |