Skip to content

Commit 9a2736d

Browse files
doc: update readme file
1 parent ea5bf63 commit 9a2736d

File tree

1 file changed

+93
-10
lines changed

1 file changed

+93
-10
lines changed

README.md

Lines changed: 93 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-use-lifecycle-helpers
22

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.
44
55
[![NPM](https://img.shields.io/npm/v/react-use-lifecycle-helpers.svg)](https://www.npmjs.com/package/react-use-lifecycle-helpers) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
66

@@ -10,22 +10,105 @@
1010
npm install --save react-use-lifecycle-helpers
1111
```
1212

13+
[See Example](https://codesandbox.io/s/test-useeffect-helpers-mzz2m)
14+
1315
## Usage
1416

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`
1752

18-
import MyComponent from 'react-use-lifecycle-helpers'
53+
A hook that's a replacement for the `componentWillUnmount` method.
1954

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+
);
26100
}
27101
```
28102

29103
## License
30104

31105
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

Comments
 (0)