Skip to content
design
Components

DNS picker

Where a network's DNS comes from: the network itself, Cloudflare, Google, or addresses the crew name.

On this page
DNS servers

The page receives: {"mode":"dhcp"}

The four DNS choices, each with the addresses it uses.
Code
import { DnsPicker, type DnsSetting } from "@bosunkit/components/dns-picker";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string = "The network's own servers chosen; the page receives each choice.";

export default function Showcase(): ReactElement {
  const [setting, setSetting]: [DnsSetting, Dispatch<SetStateAction<DnsSetting>>] = useState<DnsSetting>({
    mode: "dhcp",
  });
  return (
    <div style={{ display: "grid", gap: "var(--space-sm)", maxInlineSize: "28rem" }}>
      <DnsPicker value={setting} onValueChange={setSetting} />
      <p style={{ margin: 0, color: "var(--text-dim)" }}>The page receives: {JSON.stringify(setting)}</p>
    </div>
  );
}

A DNS picker chooses where a network's DNS comes from: the servers the network hands out (DHCP), such as a marina's; Cloudflare (1.1.1.1 and 1.0.0.1); Google (8.8.8.8 and 8.8.4.4); or addresses the crew name, such as a filtering service's. Each choice says the addresses it uses. Custom opens a field for one or more IPv4 or IPv6 addresses, separated by commas or spaces; when one is not an address it is named in the message, and nothing is reported until every address is right. The picker holds no addresses beyond the two presets; the caller applies the setting.

Examples

Custom servers

DNS servers
9.9.9.92620:fe::fe
One or more addresses, separated by commas or spaces.
Custom servers: Quad9's IPv4 and IPv6 addresses.
Code
import { DnsPicker } from "@bosunkit/components/dns-picker";
import type { ReactElement } from "react";

export const description: string = "Custom servers: Quad9's IPv4 and IPv6 addresses.";

export default function Custom(): ReactElement {
  return (
    <div style={{ maxInlineSize: "28rem" }}>
      <DnsPicker defaultValue={{ mode: "custom", servers: ["9.9.9.9", "2620:fe::fe"] }} />
    </div>
  );
}

Read-only

DNS servers
Read-only: the choice and its addresses, with nothing to change.
Code
import { DnsPicker } from "@bosunkit/components/dns-picker";
import type { ReactElement } from "react";

export const description: string = "Read-only: the choice and its addresses, with nothing to change.";

export default function ReadOnly(): ReactElement {
  return (
    <div style={{ maxInlineSize: "28rem" }}>
      <DnsPicker readOnly defaultValue={{ mode: "google" }} />
    </div>
  );
}

Props

PropTypeDefaultDescription
valueDnsSetting | undefined–The setting, when the caller holds it.
defaultValueDnsSetting | undefined–The setting it starts with when it holds it itself; the network's own servers unless set.
onValueChange((setting: DnsSetting) => void) | undefined–Called with the setting when the crew choose a preset, or with the custom servers whenever an address is added or removed and at least one is held. A typed address that is not one is named and never reported.
labelstring | undefined–The group's name, translated by the caller; "DNS servers" unless set.
disabledboolean | undefined–
readOnlyboolean | undefined–Shows the choice and the addresses without a way to change them.
classNamestring | undefined–Classes added to the root's own.
testIdstring | undefined–Becomes data-testid on the root.