react-timing-hooks - npm Package Compare versions

Comparing version 0.1.0-alpha.5 to 0.1.0-alpha.6

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [0.1.0-alpha.6](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.1.0-alpha.5...v0.1.0-alpha.6) (2019-11-08)
+
+
+### Features
+
+* Added new hook "useIdleCallback" ([20cdc46](https://github.com/EricLambrecht/react-timing-hooks/commit/20cdc46ebb104352216abefc22dd0f3685291580))
+* Added new hook "useTimeout" ([5ca6de6](https://github.com/EricLambrecht/react-timing-hooks/commit/5ca6de6d617c19b3b9757f5f2381ffb79089d9c5))
+
 ## [0.1.0-alpha.5](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.1.0-alpha.4...v0.1.0-alpha.5) (2019-11-07)
@@ -7,0 +15,0 @@

dist/index.d.ts

 import useTimeoutEffect from './timeout/useTimeoutEffect';
+import useTimeout from './timeout/useTimeout';
 import useInterval from './interval/useInterval';
 import useIdleCallbackEffect from './idle-callback/useIdleCallbackEffect';
+import useIdleCallback from './idle-callback/useIdleCallback';
 import { IntervalCallback } from './interval/types';
 import { TimeoutEffectCallback } from './timeout/types';
 import { IdleCallbackEffectCallback } from './idle-callback/types';
-export { useTimeoutEffect, useInterval, useIdleCallbackEffect, IntervalCallback, TimeoutEffectCallback, IdleCallbackEffectCallback, };
+export { useTimeoutEffect, useInterval, useIdleCallbackEffect, useTimeout, useIdleCallback, IntervalCallback, TimeoutEffectCallback, IdleCallbackEffectCallback, };

dist/index.js

@@ -10,3 +10,3 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./timeout/useTimeoutEffect", "./interval/useInterval", "./idle-callback/useIdleCallbackEffect"], factory);
+        define(["require", "exports", "./timeout/useTimeoutEffect", "./timeout/useTimeout", "./interval/useInterval", "./idle-callback/useIdleCallbackEffect", "./idle-callback/useIdleCallback"], factory);
     }
@@ -18,2 +18,4 @@ })(function (require, exports) {
     exports.useTimeoutEffect = useTimeoutEffect_1.default;
+    const useTimeout_1 = __importDefault(require("./timeout/useTimeout"));
+    exports.useTimeout = useTimeout_1.default;
     const useInterval_1 = __importDefault(require("./interval/useInterval"));
@@ -23,3 +25,5 @@ exports.useInterval = useInterval_1.default;
     exports.useIdleCallbackEffect = useIdleCallbackEffect_1.default;
+    const useIdleCallback_1 = __importDefault(require("./idle-callback/useIdleCallback"));
+    exports.useIdleCallback = useIdleCallback_1.default;
 });
 //# sourceMappingURL=index.js.map

dist/timeout/types.d.ts

 export declare type TimeoutCreator = (handler: () => unknown, timeout: number) => any;
+export declare type TimeoutId = ReturnType<typeof setTimeout>;
+export declare type TimeoutCallback = (...args: any[]) => unknown;
 export declare type TimeoutEffectCallback = (timeoutFunc: TimeoutCreator) => void | (() => void | undefined);

package.json

 {
   "name": "react-timing-hooks",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.6",
   "description": "React hooks for creating timing-related effects (setTimeout, setInterval, requestAnimationFrame, requestIdleCallback)",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -13,3 +13,3 @@ # react-timing-hooks
 * less boilerplate to write
-* no new API to learn (same es `useEffect`)
+* simple API
 * super leight-weight
@@ -19,4 +19,6 @@
 * [Docs and examples](#Documentation)
+  * [useTimeout](#usetimeoutcallback-timeout)
   * [useTimeoutEffect](#usetimeouteffecteffectcallback-deps)
   * [useInterval](#useintervalintervalcallback-delay)
+  * [useIdleCallback](#useidlecallbackcallback-options)
   * [useIdleCallbackEffect](#useidlecallbackeffecteffectcallback-deps)
@@ -29,8 +31,23 @@ * [Why bother?](#why-bother)
 
+### `useTimeout(callback, timeout)`
+
+* `callback` - a function that will be invoked as soon as the timeout expires
+
+* `timeout` - the timeout in milliseconds
+
+Example: 
+
+```javascript
+// Hide something after 2 seconds
+const hideDelayed = useTimeout(() => setHide(true), 2000)
+
+return <button onClick={hideDelayed}>Hide!</button>
+```
+
 ### `useTimeoutEffect(effectCallback, deps)`
 
-* `effectCallback` will receive one argument `timeout(f, timeout)` that has the
+* `effectCallback` - will receive one argument `timeout(f, timeout)` that has the
 same signature as a native `setTimeout`
 
-* `deps` is your regular `useEffect` dependency array
+* `deps` - is your regular `useEffect` dependency array
 
@@ -50,5 +67,5 @@ Example:
 
-* `intervalCallback` will be run every _[delay]_ (second arg) seconds
+* `intervalCallback` - will be run every _[delay]_ (second arg) seconds
 
-* `delay` is the delay at which the callback will be run. If delay is `null` the interval will be suspended.
+* `delay` - is the delay at which the callback will be run. If delay is `null` the interval will be suspended.
 
@@ -63,8 +80,23 @@ Example:
 
+### `useIdleCallback(callback, options)`
+
+* `callback` - a function that will be invoked as soon as the browser decides to run the idle callback
+
+* `options` - options for `requestIdleCallback`
+
+Example: 
+
+```javascript
+// Track button click when idle
+const trackClickWhenIdle = useIdleCallback(trackClick)
+
+return <button onClick={trackClickWhenIdle}>Track me!</button>
+```
+
 ### `useIdleCallbackEffect(effectCallback, deps)`
 
-* `effectCallback` will receive one argument `requestIdleCallback(f, opts)` that has the
+* `effectCallback` - will receive one argument `requestIdleCallback(f, opts)` that has the
 same signature as the native [`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
 
-* `deps` is your regular `useEffect` dependency array
+* `deps` - is your regular `useEffect` dependency array
 
@@ -123,4 +155,3 @@ **Note:** This hook will print a warning if the browser doesn't support `requestIdleCallback`.
   // ... 
-  
-  useTimeoutEffect((timeout) => {
+  useEffect((timeout) => {
     if (depA && depB) {
@@ -127,0 +158,0 @@ timeout(() => doSomething(), 1000)

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

29590

increased by40.24%

Number of package files

35

increased by34.62%

Lines of code

319

increased by58.71%

Number of lines in readme file

158

increased by24.41%

No dependency changes