react-timing-hooks - npm Package Compare versions

Comparing version 0.2.1 to 1.0.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## 🎉🎉🎉 [1.0.0](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.2.1...v1.0.0) (2020-03-20) 🎉🎉🎉
+
+This package has now reached a state that justifies a version 1.0.0. Technically this is version 0.2.1 with a new README and a new dedicated API documentation (which you can view [here](https://ericlambrecht.github.io/react-timing-hooks)). However, I want the public API to be considered stable at this point — which 0.X.X is [not](https://semver.org/#spec-item-4) — hence the bump to 1.0.0.
+
+Fell free to try it out and leave feedback on [Github](https://github.com/EricLambrecht/react-timing-hooks)! :)
+
 ### [0.2.1](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.2.0...v0.2.1) (2020-03-18)
@@ -7,0 +13,0 @@

dist/animation-frame/types.d.ts

 export declare type AnimationFrameHandle = ReturnType<typeof requestAnimationFrame>;

dist/animation-frame/types.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/animation-frame/useAnimationFrame.d.ts

@@ -0,0 +0,0 @@ import { Callback } from '../types';

dist/animation-frame/useAnimationFrame.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/animation-frame/useAnimationFrameLoop.d.ts

 import { Callback } from '../types';
 declare const useAnimationFrameLoop: (callback: Callback, stop?: boolean) => void;
 export default useAnimationFrameLoop;

dist/animation-frame/useAnimationFrameLoop.js

@@ -0,0 +0,0 @@ var __importDefault = (this && this.__importDefault) || function (mod) {

dist/idle-callback/types.d.ts

@@ -0,0 +0,0 @@ export declare type IdleCallbackCreator = (callback: (deadline: RequestIdleCallbackDeadline) => unknown, options?: RequestIdleCallbackOptions) => RequestIdleCallbackHandle;

dist/idle-callback/types.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/idle-callback/useIdleCallback.d.ts

@@ -0,0 +0,0 @@ import { RequestIdleCallbackDeadline, RequestIdleCallbackHandle, RequestIdleCallbackOptions } from './types';

dist/idle-callback/useIdleCallback.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/idle-callback/useIdleCallbackEffect.d.ts

@@ -0,0 +0,0 @@ import { DependencyList } from 'react';

dist/idle-callback/useIdleCallbackEffect.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/index.d.ts

@@ -0,0 +0,0 @@ import useTimeoutEffect from './timeout/useTimeoutEffect';

dist/index.js

@@ -0,0 +0,0 @@ var __importDefault = (this && this.__importDefault) || function (mod) {

dist/interval/types.d.ts

 export declare type IntervalCallback = () => unknown;

dist/interval/types.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/interval/useInterval.d.ts

@@ -0,0 +0,0 @@ import { IntervalCallback } from './types';

dist/interval/useInterval.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/timeout/types.d.ts

@@ -0,0 +0,0 @@ export declare type TimeoutCreator = (handler: () => unknown, timeout: number) => any;

dist/timeout/types.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/timeout/useTimeout.d.ts

@@ -0,0 +0,0 @@ import { TimeoutCallback } from './types';

dist/timeout/useTimeout.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/timeout/useTimeoutEffect.d.ts

@@ -0,0 +0,0 @@ import { DependencyList } from 'react';

dist/timeout/useTimeoutEffect.js

@@ -0,0 +0,0 @@ (function (factory) {

dist/types.d.ts

 export declare type Callback = (...args: any[]) => unknown;

dist/types.js

@@ -0,0 +0,0 @@ (function (factory) {

package.json

 {
   "name": "react-timing-hooks",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "React hooks for setTimeout, setInterval, requestAnimationFrame, requestIdleCallback",
@@ -42,7 +42,7 @@ "main": "dist/index.js",
     "@shopify/jest-dom-mocks": "^2.8.10",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^10.0.1",
     "@testing-library/react-hooks": "^3.2.1",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^12.12.30",
-    "@types/react": "^16.9.23",
+    "@types/jest": "^25.1.4",
+    "@types/node": "^13.9.2",
+    "@types/react": "^16.9.25",
     "@types/react-dom": "^16.9.5",
@@ -52,12 +52,12 @@ "cli-confirm": "^1.0.1",
     "emoji-cz": "^0.3.1",
-    "jest": "^24.9.0",
+    "jest": "^25.1.0",
     "node-fetch": "^2.6.0",
-    "prettier": "1.18.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "^16.13.0",
+    "prettier": "^1.19.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
     "replace": "^1.1.5",
     "rimraf": "^3.0.2",
     "standard-version": "^7.1.0",
-    "ts-jest": "^24.3.0",
+    "ts-jest": "^25.2.1",
     "typescript": "^3.8.3"
@@ -64,0 +64,0 @@ },

README.md

@@ -5,164 +5,40 @@ ![minified](https://badgen.net/bundlephobia/minzip/react-timing-hooks)
 
-# react-timing-hooks
+# React Timing Hooks
 
-This package contains a bunch of hooks that allow you to make use of `setTimeout`, 
-`setInterval`, `setIdleCallback` and `requestAnimationFrame` in your react-components _without_
-having to worry about handling "IDs" or the clean up of leaking timers etc. Apart from that
-the hooks are quite easy to use. 
+## Features
 
-Oh, and the lib is super light-weight, too, since it doesn't include any other dependencies!
+* Several React hooks for 
+    * `requestAnimationFrame`
+    * `setTimeout`
+    * `setInterval`
+    * `requestIdleCallback`
+* Callbacks, Loops and Effects
+* Full Typescript support  
+* [lightweight](https://bundlephobia.com/result?p=react-timing-hooks) (~1KB minzipped, no external dependencies)
 
-#### TL;DR
+## Usage
+   
+```jsx harmony
+import { useState } from 'react'
+import { useAnimationFrameLoop } from 'react-timing-hooks'
 
-* less boilerplate to write
-* simple API
-* super leight-weight
+const AnimationFrameCounter = ({ depA, depB }) => {
+  const [count, setCount] = useState(0)
+  const [stop, setStop] = useState(false)
 
-## Table of Contents
-* [Installation](#installation)
-* [Documentation (and examples)](#Documentation)
-  * [useTimeout](#usetimeoutcallback-timeout)
-  * [useTimeoutEffect](#usetimeouteffecteffectcallback-deps)
-  * [useInterval](#useintervalintervalcallback-delay)
-  * [useAnimationFrame](#useanimationframecallback)
-  * [useAnimationFrameLoop](#useanimationframeloopcallback)
-  * [useIdleCallback](#useidlecallbackcallback-options)
-  * [useIdleCallbackEffect](#useidlecallbackeffecteffectcallback-deps)
-* [Why bother?](#why-bother)
-* [Contributing](#contributing)
-
-## Installation
-
-```shell script
-# via npm
-npm i react-timing-hooks
-
-# via yarn
-yarn add react-timing-hooks
-```
-
-## Documentation
-
-### `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
-same signature as a native `setTimeout`
-
-* `deps` - is your regular `useEffect` dependency array
-
-This works like a regular `useEffect` hook, except that it adds a `setTimeout` like function
-to the callback args.
-
-Example: 
-
-```javascript
-// Delay the transition of a color by one second everytime it changes
-useTimeoutEffect(timeout => {
-  if (color) {
-    timeout(() => transitionTo(color), 1000)
-  }
-}, [color])
-```
-
-------
-
-### `useInterval(intervalCallback, delay)`
-
-* `intervalCallback` - will be run every _[delay]_ milliseconds
-
-* `delay` - is the delay at which the callback will be run. If delay is `null` the interval will be suspended.
-
-Example: 
-
-```javascript
-// Increase count every 200 milliseconds
-const [count, setCount] = useState(0)
-useInterval(() => setCount(count + 1), 200)
-```
-
-------
-
-### `useAnimationFrame(callback)`
-
-* `callback` - a function that will be invoked on the next animation frame
-
-------
-
-### `useAnimationFrameLoop(callback, stop = false)`
-
-* `callback` - a function that will be invoked in an animation frame loop
-
-* `stop = false` - an optional parameter to stop/pause the loop. It can be resumed by setting it to false again.
-
-Example: 
-
-```javascript
-// Update canvas on every frame
-const [stop, setStop] = useState(false)
-const updateCanvas = () => { 
-    // ... 
+  useAnimationFrameLoop(() => {
+    setCount(count + 1)
+  }, stop)
+  
+  return (
+     <div>
+      <p>{count}</p>
+      <button onClick={() => setStop(!stop)}>
+        Stop counting
+      </button>
+    </div>
+  )
 }
-useAnimationFrameLoop(updateCanvas, stop)
-```
-
-------
-
-### `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
-same signature as the native [`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
-
-* `deps` - is your regular `useEffect` dependency array
-
-This works like a regular `useEffect` hook, except that it adds a `requestIdleCallbackEffect` like function
-to the callback args.
-
-**Note:** This hook will print a warning if the browser doesn't support `requestIdleCallback`.
-
-Example: 
-
-```javascript
-// Track page view when browser is idle
-useIdleCallbackEffect(onIdle => {
-  if (page) {
-    onIdle(() => trackPageView(page))
-  }
-}, [page])
-```
-
-
+```   
+   
 ## Why bother?
@@ -178,15 +54,15 @@
 
-```javascript
-  import { useEffect } from 'react'
+```jsx harmony
+import { useEffect } from 'react'
 
-  // ... 
-
+const TimeoutRenderer = ({ depA, depB }) => {
+  const [output, setOutput] = useState(null)
   const timeoutId = useRef(null)
-
+  
   useEffect(() => {
     if (depA && depB) {
-      timeoutId.current = setTimeout(() => doSomething(), 1000)
+      timeoutId.current = setTimeout(() => setOutput('Hello World'), 1000)
     }
   }, [depA, depB])
-
+  
   useEffect(() => {
@@ -199,2 +75,7 @@ return function onUnmount() {
   }, [timeoutId])
+    
+  return output ? (
+    <div>{output}</div>
+  ) : null
+}
 ```
@@ -204,21 +85,30 @@
 
-```javascript
-  import { useTimeoutEffect } from 'react-timing-hooks'
+```jsx harmony
+import { useState } from 'react'
+import { useTimeoutEffect } from 'react-timing-hooks'
 
-  // ... 
+const TimeoutRenderer = ({ depA, depB }) => {
+  const [output, setOutput] = useState(null)
+
   useTimeoutEffect((timeout) => {
     if (depA && depB) {
-      timeout(() => doSomething(), 1000)
+      timeout(() => setOutput('Hello World'), 1000)
     }
   }, [depA, depB])
+    
+  return output ? (
+    <div>{output}</div>
+  ) : null
+}
 ```
 
 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).
+   
+## Documentation
 
+[https://ericlambrecht.github.io/react-timing-hooks/](https://ericlambrecht.github.io/react-timing-hooks/)
+  
+
 ## Contributing
 
-Contributions are welcome as long as you follow these simple rules:
-
-1. All commit messages must adhere to the [conventional commit](https://www.conventionalcommits.org/en/v1.0.0/) format. So **please use `npm run commit`** to commit your staged changes.
-2. Test everything before you commit it: `npm run test` will take care of that.
-3. Use [prettier](https://prettier.io) while developing. You can check your code with `npm run prettier:check` to make sure everything's formatted correctly.
+see [CONTRIBUTING.md](https://github.com/EricLambrecht/react-timing-hooks/blob/master/CONTRIBUTING.md)

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

37088

decreased by-29.46%

Number of package files

43

decreased by-6.52%

Lines of code

420

decreased by-0.47%

Number of lines in readme file

111

decreased by-49.77%

No dependency changes