doc: update readme file

README.md

@@ -1,6 +1,6 @@
 # react-use-lifecycle-helpers
 
-> helpers function arround useEffect hook to make your life easier
+> 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.
 
 [![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)
 
@@ -10,22 +10,105 @@
 npm install --save react-use-lifecycle-helpers
 ```
 
+[See Example](https://codesandbox.io/s/test-useeffect-helpers-mzz2m)
+
 ## Usage
 
-```jsx
-import React, { Component } from 'react'
+### `useDidMount`
+
+This hook is a replacement for the `componentDidMount` method.
+
+```javascript
+import useLifecycleMethods from "react-use-lifecycle-helpers";
+
+export default function MyComponent() {
+  const { useDidMount } = useLifecycleMethods();
+
+  useDidMount(() => {
+    console.log("MyComponent is mounted");
+  });
+}
+```
+
+### `useDidUpdate`
+
+This hook is similar to the `componentDidUpdate` method.
+
+```javascript
+import useLifecycleMethods from "react-use-lifecycle-helpers";
+
+export default function MyComponent(props) {
+  const [state, setState] = useState({ count: 0, bool: false });
+
+  const { useDidUpdate } = useLifecycleMethods(state, props);
+
+  useDidUpdate(() => {
+    console.log("MyComponent is updated");
+  });
+}
+```
+
+### `useWillUnmount`
 
-import MyComponent from 'react-use-lifecycle-helpers'
+A hook that's a replacement for the `componentWillUnmount` method.
 
-class Example extends Component {
-  render () {
-    return (
-      <MyComponent />
-    )
-  }
+```javascript
+import useLifecycleMethods from "react-use-lifecycle-helpers";
+
+export default function MyComponent() {
+  const { useWillUnmount } = useLifecycleMethods();
+
+  useWillUnmount(() => {
+    console.log("MyComponent will unmount");
+  });
+}
+```
+
+### `useDepsDidChange`
+
+Track multiple or one of the state properties.
+
+```javascript
+import useLifecycleMethods from "react-use-lifecycle-helpers";
+
+export default function MyComponent(props) {
+  const [state, setState] = useState({ count: 0, bool: false });
+
+  const { useDepsDidChange } = useLifecycleMethods(state, props);
+
+  useDepsDidChange(
+    prevState => {
+      console.log("useDepsDidChange Count", state.count, prevState.count);
+    },
+    ["count"]
+  );
+
+  useDepsDidChange(
+    prevState => {
+      console.log("useDepsDidChange Bool", state.bool, prevState.bool);
+    },
+    ["bool"]
+  );
+
+  useDepsDidChange(
+    prevState => {
+      console.log("useDepsDidChange Count", state.count, prevState.count);
+      console.log("useDepsDidChange Bool", state.bool, prevState.bool);
+    },
+    ["bool", "count"]
+  );
 }
 ```
 
 ## License
 
 MIT © [Mohcine NAZRHAN](https://github.com/Mohcine NAZRHAN)
+
+## Contributors
+
+- [Myself](https://github.com/mohcinenazrhan)
+- [Fahmi Salman](https://github.com/SalmanFahmi-IT)
+
+## Todo
+
+- [ ] Migrate to TypeScript