react-timing-hooks - npm Package Compare versions

Comparing version 2.2.0 to 2.2.2

CHANGELOG.md

@@ -5,9 +5,22 @@ # Changelog
 
+### [2.2.2](https://github.com/EricLambrecht/react-timing-hooks/compare/v2.2.1...v2.2.2) (2022-01-22)
+
+
+### Bug Fixes
+
+* Hot fix useClock API, unpublish 2.2.1, which was published a couple of minutes ago ([64a5dcb](https://github.com/EricLambrecht/react-timing-hooks/commit/64a5dcb2bb322afab1b1c6edfa42322f66563205))
+
+### [2.2.1](https://github.com/EricLambrecht/react-timing-hooks/compare/v2.2.0...v2.2.1) (2022-01-22)
+
+
+### Bug Fixes
+
+* Fix useClock export, also change it's api while still possible ([5ebc423](https://github.com/EricLambrecht/react-timing-hooks/commit/5ebc423e1f58e58680934d784ffaa50493dd81ae))
+
 ## [2.2.0](https://github.com/EricLambrecht/react-timing-hooks/compare/v2.1.0...v2.2.0) (2022-01-19)
 
+Add support for React 17.
 
 ### Features
 
-Add support for React 17.
-
 * updated React dependency version requirement ([9a4d6b1](https://github.com/EricLambrecht/react-timing-hooks/commit/9a4d6b1b0b81c628ebb80b5c8102b651da63af1f))
@@ -14,0 +27,0 @@

dist/animation-frame/useAnimationFrameLoop.d.ts

@@ -1,2 +0,2 @@
-declare const useAnimationFrameLoop: <T extends (...args: never[]) => unknown>(callback: T, stop?: boolean) => void;
+declare const useAnimationFrameLoop: <T extends (...args: never[]) => unknown>(callback: T, pause?: boolean) => void;
 export default useAnimationFrameLoop;

dist/index.d.ts

 import useTimeoutEffect from './timeout/useTimeoutEffect';
+import { TimeoutEffectCallback } from './timeout/types';
 import useTimeout from './timeout/useTimeout';
@@ -6,7 +7,8 @@ import useInterval from './interval/useInterval';
 import useIdleCallbackEffect from './idle-callback/useIdleCallbackEffect';
+import { IdleCallbackEffectCallback } from './idle-callback/types';
 import useIdleCallback from './idle-callback/useIdleCallback';
 import useAnimationFrame from './animation-frame/useAnimationFrame';
 import useAnimationFrameLoop from './animation-frame/useAnimationFrameLoop';
-import { TimeoutEffectCallback } from './timeout/types';
-import { IdleCallbackEffectCallback } from './idle-callback/types';
-export { useAnimationFrame, useAnimationFrameLoop, useIdleCallback, useIdleCallbackEffect, useInterval, useTimer, useTimeout, useTimeoutEffect, IdleCallbackEffectCallback, TimeoutEffectCallback, };
+import useClock from './interval/useClock';
+import { ClockOptions } from './interval/useClock';
+export { useAnimationFrame, useAnimationFrameLoop, useClock, useIdleCallback, useIdleCallbackEffect, useInterval, useTimer, useTimeout, useTimeoutEffect, IdleCallbackEffectCallback, TimeoutEffectCallback, ClockOptions, };

dist/index.es.js

@@ -149,11 +149,11 @@ import { useRef, useCallback, useEffect, useState } from 'react';
 
-const useAnimationFrameLoop = (callback, stop = false) => {
+const useAnimationFrameLoop = (callback, pause = false) => {
     const rafCallback = useRef(callback);
-    const stopValue = useRef(false);
+    const pauseValue = useRef(false);
     useEffect(() => {
         rafCallback.current = callback;
-        stopValue.current = stop;
-    }, [callback, stop]);
+        pauseValue.current = pause;
+    }, [callback, pause]);
     const nextCallback = useCallback(() => {
-        if (!stopValue.current) {
+        if (!pauseValue.current) {
             rafCallback.current();
@@ -169,2 +169,21 @@ }
 
-export { useAnimationFrame, useAnimationFrameLoop, useIdleCallback, useIdleCallbackEffect, useInterval, useTimeout, useTimeoutEffect, useTimer };
+/**
+ * Creates a sort of clock, i.e. a reactive time-based value that updates every second.
+ * useClock is generic (by default useClock<string> is used). The generic type defines the return type which can be
+ * changed by using a custom formatter (see options.customFormatter).
+ *
+ * @template [T=string]
+ * @param options options.locales and options.dateTimeFormatOptions will be directly forwarded to date.toLocaleTimeString(). You can also use options.customFormatter to override the output of the hook. The output must match the generic type of the hook.
+ * @returns {T}
+ */
+const useClock = (options) => {
+    const startTimeInSeconds = ((options === null || options === void 0 ? void 0 : options.startTimeInMilliseconds) || Date.now()) / 1000;
+    const currentTimeInSeconds = useTimer(startTimeInSeconds);
+    const date = new Date(currentTimeInSeconds * 1000);
+    if (options === null || options === void 0 ? void 0 : options.customFormatter) {
+        return options === null || options === void 0 ? void 0 : options.customFormatter(date);
+    }
+    return date.toLocaleTimeString(options === null || options === void 0 ? void 0 : options.locales, options === null || options === void 0 ? void 0 : options.dateTimeFormatOptions);
+};
+
+export { useAnimationFrame, useAnimationFrameLoop, useClock, useIdleCallback, useIdleCallbackEffect, useInterval, useTimeout, useTimeoutEffect, useTimer };

dist/index.js

@@ -153,11 +153,11 @@ 'use strict';
 
-const useAnimationFrameLoop = (callback, stop = false) => {
+const useAnimationFrameLoop = (callback, pause = false) => {
     const rafCallback = react.useRef(callback);
-    const stopValue = react.useRef(false);
+    const pauseValue = react.useRef(false);
     react.useEffect(() => {
         rafCallback.current = callback;
-        stopValue.current = stop;
-    }, [callback, stop]);
+        pauseValue.current = pause;
+    }, [callback, pause]);
     const nextCallback = react.useCallback(() => {
-        if (!stopValue.current) {
+        if (!pauseValue.current) {
             rafCallback.current();
@@ -173,4 +173,24 @@ }
 
+/**
+ * Creates a sort of clock, i.e. a reactive time-based value that updates every second.
+ * useClock is generic (by default useClock<string> is used). The generic type defines the return type which can be
+ * changed by using a custom formatter (see options.customFormatter).
+ *
+ * @template [T=string]
+ * @param options options.locales and options.dateTimeFormatOptions will be directly forwarded to date.toLocaleTimeString(). You can also use options.customFormatter to override the output of the hook. The output must match the generic type of the hook.
+ * @returns {T}
+ */
+const useClock = (options) => {
+    const startTimeInSeconds = ((options === null || options === void 0 ? void 0 : options.startTimeInMilliseconds) || Date.now()) / 1000;
+    const currentTimeInSeconds = useTimer(startTimeInSeconds);
+    const date = new Date(currentTimeInSeconds * 1000);
+    if (options === null || options === void 0 ? void 0 : options.customFormatter) {
+        return options === null || options === void 0 ? void 0 : options.customFormatter(date);
+    }
+    return date.toLocaleTimeString(options === null || options === void 0 ? void 0 : options.locales, options === null || options === void 0 ? void 0 : options.dateTimeFormatOptions);
+};
+
 exports.useAnimationFrame = useAnimationFrame;
 exports.useAnimationFrameLoop = useAnimationFrameLoop;
+exports.useClock = useClock;
 exports.useIdleCallback = useIdleCallback;
@@ -177,0 +197,0 @@ exports.useIdleCallbackEffect = useIdleCallbackEffect;

dist/interval/useClock.d.ts

@@ -1,2 +0,17 @@
-declare const useClock: (startTimeInMilliseconds?: number, formatter?: (date: Date) => string) => string;
+export interface ClockOptions<T> {
+    locales?: string | string[];
+    dateTimeFormatOptions?: Intl.DateTimeFormatOptions;
+    customFormatter?: (date: Date) => T;
+    startTimeInMilliseconds?: number;
+}
+/**
+ * Creates a sort of clock, i.e. a reactive time-based value that updates every second.
+ * useClock is generic (by default useClock<string> is used). The generic type defines the return type which can be
+ * changed by using a custom formatter (see options.customFormatter).
+ *
+ * @template [T=string]
+ * @param options options.locales and options.dateTimeFormatOptions will be directly forwarded to date.toLocaleTimeString(). You can also use options.customFormatter to override the output of the hook. The output must match the generic type of the hook.
+ * @returns {T}
+ */
+declare const useClock: <T = string>(options?: ClockOptions<T> | undefined) => string | T;
 export default useClock;

package.json

 {
   "name": "react-timing-hooks",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "React hooks for setTimeout, setInterval, requestAnimationFrame, requestIdleCallback",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -118,2 +118,18 @@ [![npm](https://flat.badgen.net/npm/v/react-timing-hooks)](https://www.npmjs.com/package/react-timing-hooks)
 In this case `react-timing-hooks` automatically took care of cleaning up the timeout for you (if the component is mounted for less than a second for instance).
+
+### Memoization
+
+You **don't have to worry about memoization** of your callbacks (by using `useCallback`) for example. React Timing Hooks is taking care of that for you. So even if you pass a simple inline arrow function to one of these hooks, the return value (if there is one) will not change on every render but instead stay the same (i.e. it will be memoized).
+
+This means something like this is safe to do:
+
+```javascript
+const [foo, setFoo] = useState(null)
+const onFooChange = useTimeout(() => console.log('foo changed one second ago!'), 1000)
+
+// the following effect will run only when "foo" changes, just as expected. "onFooChange" is memoized and safe to use in a dependency array.
+useEffect(() => {
+  onFooChange()
+}, [foo, onFooChange])
+```
   
@@ -120,0 +136,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

37646

increased by14.79%

Lines of code

459

increased by13.33%

Number of lines in readme file

139

increased by13.01%

No dependency changes