|
1 | 1 | # react-use-lifecycle-helpers
|
2 | 2 |
|
3 |
| -> helpers function arround useEffect hook to make your life easier |
| 3 | +> Helpers functions arround useEffect hook to make your life easier, providing the most use cases of useEffect hook, among them the lifecycle of class component. |
4 | 4 |
|
5 | 5 | [](https://www.npmjs.com/package/react-use-lifecycle-helpers) [](https://standardjs.com)
|
6 | 6 |
|
|
10 | 10 | npm install --save react-use-lifecycle-helpers
|
11 | 11 | ```
|
12 | 12 |
|
| 13 | +[See Example](https://codesandbox.io/s/test-useeffect-helpers-mzz2m) |
| 14 | + |
13 | 15 | ## Usage
|
14 | 16 |
|
15 |
| -```jsx |
16 |
| -import React, { Component } from 'react' |
| 17 | +### `useDidMount` |
| 18 | + |
| 19 | +This hook is a replacement for the `componentDidMount` method. |
| 20 | + |
| 21 | +```javascript |
| 22 | +import useLifecycleMethods from "react-use-lifecycle-helpers"; |
| 23 | + |
| 24 | +export default function MyComponent() { |
| 25 | + const { useDidMount } = useLifecycleMethods(); |
| 26 | + |
| 27 | + useDidMount(() => { |
| 28 | + console.log("MyComponent is mounted"); |
| 29 | + }); |
| 30 | +} |
| 31 | +``` |
| 32 | + |
| 33 | +### `useDidUpdate` |
| 34 | + |
| 35 | +This hook is similar to the `componentDidUpdate` method. |
| 36 | + |
| 37 | +```javascript |
| 38 | +import useLifecycleMethods from "react-use-lifecycle-helpers"; |
| 39 | + |
| 40 | +export default function MyComponent(props) { |
| 41 | + const [state, setState] = useState({ count: 0, bool: false }); |
| 42 | + |
| 43 | + const { useDidUpdate } = useLifecycleMethods(state, props); |
| 44 | + |
| 45 | + useDidUpdate(() => { |
| 46 | + console.log("MyComponent is updated"); |
| 47 | + }); |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +### `useWillUnmount` |
17 | 52 |
|
18 |
| -import MyComponent from 'react-use-lifecycle-helpers' |
| 53 | +A hook that's a replacement for the `componentWillUnmount` method. |
19 | 54 |
|
20 |
| -class Example extends Component { |
21 |
| - render () { |
22 |
| - return ( |
23 |
| - <MyComponent /> |
24 |
| - ) |
25 |
| - } |
| 55 | +```javascript |
| 56 | +import useLifecycleMethods from "react-use-lifecycle-helpers"; |
| 57 | + |
| 58 | +export default function MyComponent() { |
| 59 | + const { useWillUnmount } = useLifecycleMethods(); |
| 60 | + |
| 61 | + useWillUnmount(() => { |
| 62 | + console.log("MyComponent will unmount"); |
| 63 | + }); |
| 64 | +} |
| 65 | +``` |
| 66 | + |
| 67 | +### `useDepsDidChange` |
| 68 | + |
| 69 | +Track multiple or one of the state properties. |
| 70 | + |
| 71 | +```javascript |
| 72 | +import useLifecycleMethods from "react-use-lifecycle-helpers"; |
| 73 | + |
| 74 | +export default function MyComponent(props) { |
| 75 | + const [state, setState] = useState({ count: 0, bool: false }); |
| 76 | + |
| 77 | + const { useDepsDidChange } = useLifecycleMethods(state, props); |
| 78 | + |
| 79 | + useDepsDidChange( |
| 80 | + prevState => { |
| 81 | + console.log("useDepsDidChange Count", state.count, prevState.count); |
| 82 | + }, |
| 83 | + ["count"] |
| 84 | + ); |
| 85 | + |
| 86 | + useDepsDidChange( |
| 87 | + prevState => { |
| 88 | + console.log("useDepsDidChange Bool", state.bool, prevState.bool); |
| 89 | + }, |
| 90 | + ["bool"] |
| 91 | + ); |
| 92 | + |
| 93 | + useDepsDidChange( |
| 94 | + prevState => { |
| 95 | + console.log("useDepsDidChange Count", state.count, prevState.count); |
| 96 | + console.log("useDepsDidChange Bool", state.bool, prevState.bool); |
| 97 | + }, |
| 98 | + ["bool", "count"] |
| 99 | + ); |
26 | 100 | }
|
27 | 101 | ```
|
28 | 102 |
|
29 | 103 | ## License
|
30 | 104 |
|
31 | 105 | MIT © [Mohcine NAZRHAN](https://github.com/Mohcine NAZRHAN)
|
| 106 | + |
| 107 | +## Contributors |
| 108 | + |
| 109 | +- [Myself](https://github.com/mohcinenazrhan) |
| 110 | +- [Fahmi Salman](https://github.com/SalmanFahmi-IT) |
| 111 | + |
| 112 | +## Todo |
| 113 | + |
| 114 | +- [ ] Migrate to TypeScript |
0 commit comments