Function useKosTimeZones

  • useKosTimeZones<T>(optionsMap?): {
        options: T[];
        raw: string[];
        regionModel: undefined | RegionInfoModel<BaseRegionResponse>;
        selectedTimeZone: string;
        timeZones: string[];
        updateTimeZone: ((e) => void);
        selectProps: {
            onChange: ((e) => void);
            value: string;
            options: T[];
        };
    }

  • Custom React hook for managing and interacting with timezone data. It fetches timezone information from the RegionInfoModel and facilitates timezone selection in a React application.

    Type Parameters

    • T extends {} = any

    Parameters

    • optionsMap: OptionMap<T> = DEFAULT_OPTION_MAP

      A function that maps a timezone string to a JSX structure or other specified format.

    Returns {
        options: T[];
        raw: string[];
        regionModel: undefined | RegionInfoModel<BaseRegionResponse>;
        selectedTimeZone: string;
        timeZones: string[];
        updateTimeZone: ((e) => void);
        selectProps: {
            onChange: ((e) => void);
            value: string;
            options: T[];
        };
    }

    An object containing timezone options, raw timezone data, the selected timezone, and functions to handle updates.

    • options: T[]
    • raw: string[]
    • regionModel: undefined | RegionInfoModel<BaseRegionResponse>
    • selectedTimeZone: string
    • timeZones: string[]
    • updateTimeZone: ((e) => void)
        • (e): void

        • Parameters

          • e: SelectCallback

          Returns void

    • selectProps: {
          onChange: ((e) => void);
          value: string;
          options: T[];
      }
      • onChange: ((e) => void)
          • (e): void

          • Parameters

            • e: SelectCallback

            Returns void

      • value: string
      • options: T[]

    Typeparam

    T The type of the options that the hook will produce for use in UI components.

    Example

    import React from 'react';
    import { useKosTimeZones } from '@kosdev-code/kos-ui-sdk';

    const MyComponent: React.FC = () => {
      // Using the hook with the default option mapper
      const { selectProps } = useKosTimeZones();

      return (
        <div>
          <label>Select Timezone:</label>
          <select {...selectProps}>
            {selectProps.options}
          </select>
        </div>
      );
    };

    export default MyComponent;

    Example

    Using the hook with a custom component and regionMap function:

    import React from 'react';
    import { useKosTimeZones } from '@kosdev-code/kos-ui-sdk';

    // Custom component that expects an options prop
    const CustomSelectComponent: React.FC<{ options: { label: string; value: string }[] }> = ({ options }) => {
      return (
        <select>
          {options.map(option => (
            <option key={option.value} value={option.value}>{option.label}</option>
          ))}
        </select>
      );
    };

    // Custom regionMap function to map timezones to the required format for CustomSelectComponent
    const customRegionMap = (timezone: string) => ({
      label: `Timezone: ${timezone}`,
      value: timezone
    });

    const MyComponent: React.FC = () => {
      // Using the hook with the custom regionMap function
      const { options } = useKosTimeZones(customRegionMap);

      return (
        <div>
          <label>Select Timezone:</label>
          <CustomSelectComponent options={options} />
        </div>
      );
    };

    export default MyComponent;

Settings

Member Visibility

Theme