React UI

Regions ​

The regions a person can pick for the notation, beside the one their language comes with and the one the operating system was set to. The list is short on purpose: it is for a computer whose region reads nothing like the person in front of it, not a country picker.

ts
import { FORMAT_LANGUAGE, FORMAT_REGION_CHOICES, FORMAT_REGIONS, FORMAT_SYSTEM, formatRegionFrom, regionName } from '@basmilius/react-ui/format';
tsx
import { useSyncExternalStore } from 'react';
import { FORMAT_REGIONS, formatRegionFrom, localTimeZone, regionName, systemLocale, useFormatLocale } from '@basmilius/react-ui/format';
import { PreferencesBar } from '../shared/preferences-bar.tsx';
import { preferences } from '../shared/preferences.ts';
import { Values } from '../shared/values.tsx';

export default function RegionsDemo() {
    useFormatLocale();
    const { language } = useSyncExternalStore(preferences.subscribe, preferences.get, preferences.get);

    return (
        <div className="flex w-full max-w-lg flex-col gap-4">
            <PreferencesBar />
            <Values
                rows={[
                    ...FORMAT_REGIONS.map((region): [string, string] => [`regionName('${region}', '${language}')`, regionName(region, language)]),
                    ["formatRegionFrom('xx-XX')", formatRegionFrom('xx-XX')],
                    ['systemLocale()', systemLocale()],
                    ['localTimeZone()', localTimeZone() ?? 'null']
                ]}
            />
        </div>
    );
}

The choices ​

FORMAT_REGIONS holds the tags on offer: nl-NL, en-US, en-GB, de-DE, fr-FR, es-ES, sv-SE and ja-JP. FORMAT_REGION_CHOICES puts two more in front of them, which is the list a settings select offers:

FORMAT_LANGUAGE follows the language. It uses the operating system's region when that already speaks the language, so Dutch in Belgium keeps writing dates the Belgian way, and otherwise the country the language is most spoken in: en-US for English, nl-NL for Dutch.

FORMAT_SYSTEM follows the operating system, through systemLocale(). A desktop shell that reads the system's region should hand it over as systemLocale in the source: inside a shell the browser's own locale is the language of the app bundle, so an English app on a Dutch Mac would write 08:00 AM.

Naming a region ​

regionName(region, language) names the country of a tag in a language, through Intl.DisplayNames: nl-NL in English is "Netherlands", in Dutch "Nederland". No translation file carries a list of countries.

Reading a stored value ​

formatRegionFrom(stored) answers the stored region if it is one of the choices, and FORMAT_LANGUAGE for anything else, such as a region an older or newer version of your app wrote. Run a stored setting through it before you hand it to the source.

The time zone ​

localTimeZone() answers the IANA time zone of this computer, such as Europe/Amsterdam, or null when the runtime does not say.