@ptolemy2002/react-mount-effects 1.1.4 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -3
- package/index.js +8 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,12 +4,47 @@ React allows `useEffect(() => {callback()}, [])` to run the callback only on fir
|
|
|
4
4
|
The hooks are not exported as default, so you can import in one of the following ways:
|
|
5
5
|
```
|
|
6
6
|
//ES6
|
|
7
|
-
import { useMountEffect, useUnmountEffect } from '@ptolemy2002/react-mount-effects';
|
|
7
|
+
import { useMountEffect, useUnmountEffect, useDelayedEffect } from '@ptolemy2002/react-mount-effects';
|
|
8
8
|
//CommonJS
|
|
9
|
-
const { useMountEffect, useUnmountEffect } = require('@ptolemy2002/react-mount-effects');
|
|
9
|
+
const { useMountEffect, useUnmountEffect, useDelayedEffect } = require('@ptolemy2002/react-mount-effects');
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
The example for this library purposefully does not run in strict mode, as doing so allows more clear demonstration of exactly when each hook runs (console logs are run only once and there aren't any extraneous mounts/unmounts).
|
|
13
|
+
|
|
14
|
+
## Hooks
|
|
15
|
+
The following hooks are available in the library:
|
|
16
|
+
|
|
17
|
+
### useMountEffect
|
|
18
|
+
#### Description
|
|
19
|
+
Runs the callback only on first mount. The return value of the callback is ignored.
|
|
20
|
+
|
|
21
|
+
#### Parameters
|
|
22
|
+
- `callback` (Function): The callback to run on first mount.
|
|
23
|
+
|
|
24
|
+
#### Returns
|
|
25
|
+
None
|
|
26
|
+
|
|
27
|
+
### useUnmountEffect
|
|
28
|
+
#### Description
|
|
29
|
+
Runs the callback only on unmount. The return value of the callback is ignored.
|
|
30
|
+
|
|
31
|
+
#### Parameters
|
|
32
|
+
- `callback` (Function): The callback to run on unmount.
|
|
33
|
+
|
|
34
|
+
#### Returns
|
|
35
|
+
None
|
|
36
|
+
|
|
37
|
+
### useDelayedEffect
|
|
38
|
+
#### Description
|
|
39
|
+
Runs the callback only after it has been triggered `delay + 1` times (since the first is on mount and does not represent a state change). The return value of the callback is ignored.
|
|
40
|
+
|
|
41
|
+
#### Parameters
|
|
42
|
+
- `callback` (Function): The callback to run after the delay. The first parameter is the number of times the effect has been triggered since either initialization or last reset, and the second argument is a function that allows you to reset the counter.
|
|
43
|
+
- `deps` (Array): An array of dependencies to listen to. This works exactly like the `useEffect` hook's dependencies.
|
|
44
|
+
- `delay` (Number): The number of times the dependencies must change before the callback is run. Default is `0`, meaning the callback is run on any change, but not on mount.
|
|
45
|
+
|
|
46
|
+
#### Returns
|
|
47
|
+
None
|
|
13
48
|
|
|
14
49
|
## Meta
|
|
15
50
|
This is a React Library Created by Ptolemy2002's [cra-template-react-library](https://www.npmjs.com/package/@ptolemy2002/cra-template-react-library) template in combination with [create-react-app](https://www.npmjs.com/package/create-react-app). It contains methods of building and publishing your library to npm.
|
package/index.js
CHANGED
|
@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
19
19
|
// src/index.js
|
|
20
20
|
var src_exports = {};
|
|
21
21
|
__export(src_exports, {
|
|
22
|
+
useDelayedEffect: () => useDelayedEffect,
|
|
22
23
|
useMountEffect: () => useMountEffect,
|
|
23
24
|
useUnmountEffect: () => useUnmountEffect
|
|
24
25
|
});
|
|
@@ -32,3 +33,10 @@ function useMountEffect(callback) {
|
|
|
32
33
|
function useUnmountEffect(callback) {
|
|
33
34
|
(0, import_react.useEffect)(() => callback, []);
|
|
34
35
|
}
|
|
36
|
+
function useDelayedEffect(callback, deps = [], delay = 0) {
|
|
37
|
+
const changeCount = (0, import_react.useRef)(0);
|
|
38
|
+
(0, import_react.useEffect)(() => {
|
|
39
|
+
changeCount.current++;
|
|
40
|
+
if (changeCount.current > delay + 1) callback(changeCount, () => changeCount.current = 0);
|
|
41
|
+
}, deps);
|
|
42
|
+
}
|