Variable HeaderWorldClockConst

Type Declaration

• • (
        props: {
            clockConfigs: ClockConfig[];
            customTimeFormat?: DateTimeFormatOptions;
        },
    ): Element
    | null

  • A component to display a configurable list of clocks for various time zones.

    Parameters

    • props: { clockConfigs: ClockConfig[]; customTimeFormat?: DateTimeFormatOptions }

    Returns Element | null

    Example

    Here's a simple example:

    // This will give you a clock for the time zone that Stockholm is in
    // you can add more than one but keep in mind space may be limited
    const clockConfigs: ClockConfig[] = [
     {
       label: 'STO',
       timeZone: 'Europe/Stockholm',
     },
    ];
    
    // Setting hour12 to false will make all the clocks show in the 24hr format
    const timeFormat: Intl.DateTimeFormatOptions = {
     hour: '2-digit',
     minute: '2-digit',
     hour12: false,
    };
    
    // Here is the component in use:
    <HeaderWorldClock
     clockConfigs={clockConfigs}
     customTimeFormat={timeFormat}
    />
    Copy