# AutoRefresh

> "Auto-refresh: 30s ▾" for a live list: a menu of intervals whose choice lives in the URL (or wherever `hrefFor` points, such as a cookie endpoint), and the time the list was last fetched, which an island advances while it reloads a frame or the page on that interval.

```ts
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.

## Examples

```tsx
<AutoRefresh
	id="monitors-refresh"
	url={request.url}
	frame="monitor-list"
	refreshedAt={new Date()}
	options={[{ value: 0, label: "Off" }, { value: 30, label: "30s" }, { value: 60, label: "1m" }]}
	labels={{ trigger: "Auto-refresh", updated: "Updated {time}" }}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | Prefix for the menu id; unique on the page. |
| `url?` | `URL \| string` | The page's current URL, which holds the choice. @default "/" |
| `name?` | `string` | The search parameter holding the interval. @default "refresh" |
| `value?` | `number` | The interval in force, overriding the URL, for a choice stored in a cookie. |
| `defaultValue?` | `number` | The interval while neither `value` nor the URL names one. @default 0 |
| `options?` | `Option[]` | The intervals offered, such as Off, 10s, 30s, 1m and 5m. |
| `hrefFor?` | `(value: number) => string` | Where choosing `value` leads; defaults to the URL with the parameter set (removed for the default). |
| `frame?` | `string` | The named frame to reload; unset reloads the page through its top frame. A name not on the page reloads nothing. |
| `refreshedAt?` | `Date` | When the list on screen was fetched. Defaults to the time of rendering. |
| `locale?` | `string` | Locale for the time. Defaults to the runtime's. |
| `timeZone?` | `string` | Time zone the server writes the first time in. Defaults to the runtime's. |
| `show?` | `"all" \| "choices" \| "status"` | 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` |  |

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`. |