react-timing-hooks - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2

dist/animation-frame/useAnimationFrame.d.ts

 /**
+ * Returns a function that can be used to run the given callback via `window.requestAnimationFrame()`.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked in the next animation frame
@@ -3,0 +7,0 @@ */

dist/idle-callback/useIdleCallback.d.ts

 import { RequestIdleCallbackOptions } from './types';
 /**
+ * Returns a function that can be used to invoke the given callback via `window.requestIdleCallback()`.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked as soons as the browser invokes the idle callback
@@ -4,0 +8,0 @@ * @param options Options for requestIdleCallback

dist/idle-callback/useIdleCallbackEffect.d.ts

 import { DependencyList } from 'react';
 import { IdleCallbackEffectCallback } from './types';
+/**
+ * Behaves like a regular use effect except that its callback receives a function-argument that allows
+ * to run callbacks via `window.requestIdleCallback` inside the effect. Pending idle callbacks will be cleared on unmount.
+ * @param effect
+ * @param deps
+ */
 declare const useIdleCallbackEffect: (effect: IdleCallbackEffectCallback, deps: DependencyList) => void;
 export default useIdleCallbackEffect;

dist/index.es.js

 import { useRef, useCallback, useEffect, useState } from 'react';
 
+/**
+ * This hook behaves like a regular useEffect except that it provides a timeout function via it's arguments
+ * that can be used to spawn timeouts via `window.setTimeout()` from inside the effect. The timeouts will be cleared on unmount.
+ * @param effect The effect callback, it receives a timeout function as its first argument and a timeout clearer as its second
+ * @param deps The dependency array from useEffect.
+ */
 const useTimeoutEffect = (effect, deps) => {
@@ -31,4 +37,10 @@ const timeoutIds = useRef([]);
 /**
+ * This hook will return a function that executes the provided callback after the specified amount of time.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked after the timeout expired
  * @param timeout A timeout in milliseconds
+ *
+ * @returns a function that executes the provided callback after the specified amount of time
  */
@@ -55,8 +67,16 @@ function useTimeout(callback, timeout) {
 
-/**
+/*
  * This hook was inspired by Dan Abramov's blogpost:
  * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+/**
+ * Calls the given function at a regular interval.
  *
- * @param callback
- * @param delay
+ * The interval can be paused, resumed, stopped etc. via the returned callbacks.
+ *
+ * Active intervals will be cleared in case the component unmounts.
+ *
+ * @param callback A function that will be called at the specified interval
+ * @param delay time in milliseconds between each invocation of callback
+ * @returns An object of properties to control the interval or see it's status
  */
@@ -109,2 +129,11 @@ const useInterval = (callback, delay) => {
 
+/**
+ * A hook that updates a number on a regular interval based on the provided settings.
+ *
+ * Active intervals will be cleared on unmount.
+ *
+ * @param settings.start the initial value
+ * @param settings.interval duration in ms between steps
+ * @param settings.stepSize amount that is added to the current counter value on every step
+ */
 const useCounter = (settings) => {
@@ -117,2 +146,7 @@ const { start = 0, interval = 1000, stepSize = 1 } = settings;
 
+/**
+ * A hook that starts a timer, i.e. a reactive number that is increased every second.
+ * @param start Starting value of the timer
+ * @returns the current timer value.
+ */
 const useTimer = (start = 0) => {
@@ -123,2 +157,8 @@ const [value] = useCounter({ start, interval: 1000, stepSize: 1 });
 
+/**
+ * Behaves like a regular use effect except that its callback receives a function-argument that allows
+ * to run callbacks via `window.requestIdleCallback` inside the effect. Pending idle callbacks will be cleared on unmount.
+ * @param effect
+ * @param deps
+ */
 const useIdleCallbackEffect = (effect, deps) => {
@@ -147,2 +187,6 @@ if (!window.requestIdleCallback) {
 /**
+ * Returns a function that can be used to invoke the given callback via `window.requestIdleCallback()`.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked as soons as the browser invokes the idle callback
@@ -175,2 +219,6 @@ * @param options Options for requestIdleCallback
 /**
+ * Returns a function that can be used to run the given callback via `window.requestAnimationFrame()`.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked in the next animation frame
@@ -225,3 +273,3 @@ */
  * @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}
+ * @returns {T} The current (formatted) time
  */
@@ -238,4 +286,10 @@ const useClock = (options) => {
 
+/**
+ * This hook creates a countdown that starts at the specified number and decreases this number each second.
+ * The current value of the countdown is returned from the hook. The countdown will start immediately on creation.
+ * @param start Starting value of the countdown
+ * @returns an array: the first element is the countdown value, the second is an object of interval controls, see useInterval()
+ */
 const useCountdown = (start) => useCounter({ start, interval: 1000, stepSize: -1 });
 
 export { useAnimationFrame, useAnimationFrameLoop, useClock, useCountdown, useCounter, useIdleCallback, useIdleCallbackEffect, useInterval, useTimeout, useTimeoutEffect, useTimer };

dist/index.js

@@ -7,2 +7,8 @@ 'use strict';
 
+/**
+ * This hook behaves like a regular useEffect except that it provides a timeout function via it's arguments
+ * that can be used to spawn timeouts via `window.setTimeout()` from inside the effect. The timeouts will be cleared on unmount.
+ * @param effect The effect callback, it receives a timeout function as its first argument and a timeout clearer as its second
+ * @param deps The dependency array from useEffect.
+ */
 const useTimeoutEffect = (effect, deps) => {
@@ -36,4 +42,10 @@ const timeoutIds = react.useRef([]);
 /**
+ * This hook will return a function that executes the provided callback after the specified amount of time.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked after the timeout expired
  * @param timeout A timeout in milliseconds
+ *
+ * @returns a function that executes the provided callback after the specified amount of time
  */
@@ -60,8 +72,16 @@ function useTimeout(callback, timeout) {
 
-/**
+/*
  * This hook was inspired by Dan Abramov's blogpost:
  * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+/**
+ * Calls the given function at a regular interval.
  *
- * @param callback
- * @param delay
+ * The interval can be paused, resumed, stopped etc. via the returned callbacks.
+ *
+ * Active intervals will be cleared in case the component unmounts.
+ *
+ * @param callback A function that will be called at the specified interval
+ * @param delay time in milliseconds between each invocation of callback
+ * @returns An object of properties to control the interval or see it's status
  */
@@ -114,2 +134,11 @@ const useInterval = (callback, delay) => {
 
+/**
+ * A hook that updates a number on a regular interval based on the provided settings.
+ *
+ * Active intervals will be cleared on unmount.
+ *
+ * @param settings.start the initial value
+ * @param settings.interval duration in ms between steps
+ * @param settings.stepSize amount that is added to the current counter value on every step
+ */
 const useCounter = (settings) => {
@@ -122,2 +151,7 @@ const { start = 0, interval = 1000, stepSize = 1 } = settings;
 
+/**
+ * A hook that starts a timer, i.e. a reactive number that is increased every second.
+ * @param start Starting value of the timer
+ * @returns the current timer value.
+ */
 const useTimer = (start = 0) => {
@@ -128,2 +162,8 @@ const [value] = useCounter({ start, interval: 1000, stepSize: 1 });
 
+/**
+ * Behaves like a regular use effect except that its callback receives a function-argument that allows
+ * to run callbacks via `window.requestIdleCallback` inside the effect. Pending idle callbacks will be cleared on unmount.
+ * @param effect
+ * @param deps
+ */
 const useIdleCallbackEffect = (effect, deps) => {
@@ -152,2 +192,6 @@ if (!window.requestIdleCallback) {
 /**
+ * Returns a function that can be used to invoke the given callback via `window.requestIdleCallback()`.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked as soons as the browser invokes the idle callback
@@ -180,2 +224,6 @@ * @param options Options for requestIdleCallback
 /**
+ * Returns a function that can be used to run the given callback via `window.requestAnimationFrame()`.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked in the next animation frame
@@ -230,3 +278,3 @@ */
  * @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}
+ * @returns {T} The current (formatted) time
  */
@@ -243,2 +291,8 @@ const useClock = (options) => {
 
+/**
+ * This hook creates a countdown that starts at the specified number and decreases this number each second.
+ * The current value of the countdown is returned from the hook. The countdown will start immediately on creation.
+ * @param start Starting value of the countdown
+ * @returns an array: the first element is the countdown value, the second is an object of interval controls, see useInterval()
+ */
 const useCountdown = (start) => useCounter({ start, interval: 1000, stepSize: -1 });
@@ -245,0 +299,0 @@

dist/interval/useClock.d.ts

@@ -14,5 +14,5 @@ export interface ClockOptions<T> {
  * @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}
+ * @returns {T} The current (formatted) time
  */
 declare const useClock: <T = string>(options?: ClockOptions<T> | undefined) => string | T;
 export default useClock;

dist/interval/useCountdown.d.ts

 import { IntervalControls } from './useInterval';
+/**
+ * This hook creates a countdown that starts at the specified number and decreases this number each second.
+ * The current value of the countdown is returned from the hook. The countdown will start immediately on creation.
+ * @param start Starting value of the countdown
+ * @returns an array: the first element is the countdown value, the second is an object of interval controls, see useInterval()
+ */
 declare const useCountdown: (start: number) => [number, IntervalControls];
 export default useCountdown;

dist/interval/useCounter.d.ts

@@ -7,3 +7,12 @@ import { IntervalControls } from './useInterval';
 };
+/**
+ * A hook that updates a number on a regular interval based on the provided settings.
+ *
+ * Active intervals will be cleared on unmount.
+ *
+ * @param settings.start the initial value
+ * @param settings.interval duration in ms between steps
+ * @param settings.stepSize amount that is added to the current counter value on every step
+ */
 declare const useCounter: (settings: CounterSettings) => [number, IntervalControls];
 export default useCounter;

dist/interval/useInterval.d.ts

@@ -10,9 +10,13 @@ export type IntervalControls = {
 /**
- * This hook was inspired by Dan Abramov's blogpost:
- * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ * Calls the given function at a regular interval.
  *
- * @param callback
- * @param delay
+ * The interval can be paused, resumed, stopped etc. via the returned callbacks.
+ *
+ * Active intervals will be cleared in case the component unmounts.
+ *
+ * @param callback A function that will be called at the specified interval
+ * @param delay time in milliseconds between each invocation of callback
+ * @returns An object of properties to control the interval or see it's status
  */
 declare const useInterval: <T extends (...args: never[]) => unknown>(callback: T, delay: number | null) => IntervalControls;
 export default useInterval;

dist/interval/useTimer.d.ts

@@ -0,2 +1,7 @@
+/**
+ * A hook that starts a timer, i.e. a reactive number that is increased every second.
+ * @param start Starting value of the timer
+ * @returns the current timer value.
+ */
 declare const useTimer: (start?: number) => number;
 export default useTimer;

dist/timeout/useTimeout.d.ts

 /// <reference types="node" />
 /**
+ * This hook will return a function that executes the provided callback after the specified amount of time.
+ *
+ * Pending callbacks will be cleared in case the component unmounts.
+ *
  * @param callback The callback that is invoked after the timeout expired
  * @param timeout A timeout in milliseconds
+ *
+ * @returns a function that executes the provided callback after the specified amount of time
  */
 declare function useTimeout<T extends (...args: never[]) => unknown>(callback: T, timeout: number): (...args: Parameters<T>) => NodeJS.Timeout | number;
 export default useTimeout;

dist/timeout/useTimeoutEffect.d.ts

 import { DependencyList } from 'react';
 import { TimeoutEffectCallback } from './types';
+/**
+ * This hook behaves like a regular useEffect except that it provides a timeout function via it's arguments
+ * that can be used to spawn timeouts via `window.setTimeout()` from inside the effect. The timeouts will be cleared on unmount.
+ * @param effect The effect callback, it receives a timeout function as its first argument and a timeout clearer as its second
+ * @param deps The dependency array from useEffect.
+ */
 declare const useTimeoutEffect: (effect: TimeoutEffectCallback, deps: DependencyList) => void;
 export default useTimeoutEffect;

package.json

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

README.md

@@ -1,2 +0,2 @@
-<img alt="logo" src="https://github.com/EricLambrecht/react-timing-hooks/raw/master/logo.png" width="680" />
+<img alt="logo" src="https://github.com/EricLambrecht/react-timing-hooks/raw/main/logo.png" width="680" />
 
@@ -3,0 +3,0 @@ [![npm](https://flat.badgen.net/npm/v/react-timing-hooks)](https://www.npmjs.com/package/react-timing-hooks)

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

43195

increased by22.99%

Lines of code

716

increased by28.32%

No dependency changes