react-timezone-select - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/index.d.ts

@@ -7,3 +7,3 @@ import { Props as Props$1 } from 'react-select';
 declare type ILabelStyle = 'original' | 'altName' | 'abbrev';
-interface ITimezoneOption {
+declare type ITimezoneOption = {
     value: string;
@@ -14,16 +14,22 @@ label: string;
     offset?: number;
-}
+};
 declare type ITimezone = ITimezoneOption | string;
-interface Props extends Omit<Props$1<ITimezone, false>, 'onChange'> {
-    value: ITimezone;
+declare type TimezoneSelectOptions = {
     labelStyle?: ILabelStyle;
-    onChange?: (timezone: ITimezoneOption) => void;
     timezones?: ICustomTimezone;
     maxAbbrLength?: number;
-}
+};
+declare type Props = Omit<Props$1<ITimezone, false>, 'onChange'> & TimezoneSelectOptions & {
+    value: ITimezone;
+    onChange?: (timezone: ITimezoneOption) => void;
+};
 
 declare const allTimezones: ICustomTimezone;
 
-declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, timezones, maxAbbrLength, ...props }: Props) => JSX.Element;
+declare function useTimezoneSelect({ timezones, labelStyle, maxAbbrLength, }: TimezoneSelectOptions): {
+    parseTimezone: (zone: ITimezone) => ITimezoneOption;
+    options: ITimezoneOption[];
+};
+declare const TimezoneSelect: ({ value, onBlur, onChange, labelStyle, maxAbbrLength, timezones, ...props }: Props) => JSX.Element;
 
-export { ILabelStyle, ITimezone, ITimezoneOption, Props, allTimezones, TimezoneSelect as default };
+export { ILabelStyle, ITimezone, ITimezoneOption, Props, TimezoneSelectOptions, allTimezones, TimezoneSelect as default, useTimezoneSelect };

dist/index.js

@@ -92,13 +92,9 @@ // src/index.tsx
 // src/index.tsx
-var TimezoneSelect = ({
-  value,
-  onBlur,
-  onChange,
+function useTimezoneSelect({
+  timezones = timezone_list_default,
   labelStyle = "original",
-  timezones = timezone_list_default,
-  maxAbbrLength = 4,
-  ...props
-}) => {
-  const getOptions = React.useMemo(
-    () => Object.entries(timezones).reduce((selectOptions, zone) => {
+  maxAbbrLength = 4
+}) {
+  const options = React.useMemo(() => {
+    return Object.entries(timezones).map((zone) => {
       try {
@@ -131,3 +127,3 @@ const now = spacetime.now(zone[0]);
         }
-        selectOptions.push({
+        return {
           value: tz.name,
@@ -138,13 +134,8 @@ label,
           altName
-        });
-        return selectOptions;
+        };
       } catch {
-        return selectOptions;
+        return null;
       }
-    }, []).sort((a, b) => a.offset - b.offset),
-    [labelStyle, timezones]
-  );
-  const handleChange = (tz) => {
-    onChange && onChange(tz);
-  };
+    }).filter(Boolean).sort((a, b) => a.offset - b.offset);
+  }, [labelStyle, timezones]);
   const findFuzzyTz = (zone) => {
@@ -157,3 +148,3 @@ let currentTime = spacetime.now("GMT");
     }
-    return getOptions.filter(
+    return options.filter(
       (tz) => tz.offset === currentTime.timezone().current.offset
@@ -187,7 +178,26 @@ ).map((tz) => {
     if (typeof zone === "string") {
-      return getOptions.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
+      return options.find((tz) => tz.value === zone) || zone.indexOf("/") !== -1 && findFuzzyTz(zone);
     } else if (zone.value && !zone.label) {
-      return getOptions.find((tz) => tz.value === zone.value);
+      return options.find((tz) => tz.value === zone.value);
     }
   };
+  return { options, parseTimezone };
+}
+var TimezoneSelect = ({
+  value,
+  onBlur,
+  onChange,
+  labelStyle,
+  maxAbbrLength,
+  timezones,
+  ...props
+}) => {
+  const { options, parseTimezone } = useTimezoneSelect({
+    timezones,
+    labelStyle,
+    maxAbbrLength
+  });
+  const handleChange = (tz) => {
+    onChange && onChange(tz);
+  };
   return /* @__PURE__ */ React.createElement(
@@ -198,3 +208,3 @@ Select,
       onChange: handleChange,
-      options: getOptions,
+      options,
       onBlur,
@@ -207,3 +217,4 @@ ...props
   timezone_list_default as allTimezones,
-  TimezoneSelect as default
+  TimezoneSelect as default,
+  useTimezoneSelect
 };

package.json

 {
   "name": "react-timezone-select",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Usable, dynamic React Timezone Select",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -141,2 +141,28 @@ # 🌐⌚ react-timezone-select
 
+## 🎨 Custom Select component
+
+By default, `react-timezone-select` uses [`react-select`](https://github.com/jedwatson/react-select) as underlying select component. If you'd like to bring your own select component, you can use the `useTimezoneSelect` hook instead of the `TimezoneSelect` component to render the timezones using your self-provided select component.
+
+```jsx
+import { useTimezoneSelect, allTimezones } from 'react-timezone-select'
+
+const labelStyle = 'original'
+const timezones = {
+  ...allTimezones,
+  'Europe/Berlin': 'Frankfurt'
+}
+
+const customSelect = () => {
+  const { options, parseTimezone } = useTimezoneSelect({ labelStyle, timezones })
+
+  return (
+    <select onChange={e => onChange(parseTimezone(e.currentTarget.value))}>
+      {options.map(option => (
+        <option value={option.value}>{option.label}</option>
+      ))}
+    </select>
+  )
+}
+```
+
 ## 🚧 Contributing
@@ -143,0 +169,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28184

increased by5.93%

Lines of code

485

increased by6.36%

Number of lines in readme file

177

increased by17.22%

No dependency changes