feat: 🎸 useWillMount and documentation update

Author: prc5

README.md

@@ -9,7 +9,6 @@
 
 > React lifecycle turned into dev friendly hooks
 
-- [Docs](http://bettertyped.github.io/react-lifecycle-hooks/)
 - [Better Typed](https://github.com/BetterTyped)
 
 ## Features
@@ -33,12 +32,20 @@ yarn add @better-typed/react-lifecycle-hooks
 
 ```tsx
 import React from "react";
-import { useDidMount, useDidRender, useDidUpdate, useWillUnmount } from "@better-typed/react-lifecycle-hooks";
+import { useDidMount, useDidRender, useDidUpdate, useWillUnmount,useIsMounted, useWillMount } from "@better-typed/react-lifecycle-hooks";
 
 const MyComponent: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false)
 
-  // Called first
+  // returns ref with the mounted boolean state
+  const mounted = useIsMounted()
+
+  // Called before mount
+  useWillMount(() => {
+    // ...
+  })
+
+  // Called on component mount
   useDidMount(() => {
     // ...
   })
@@ -53,7 +60,7 @@ const MyComponent: React.FC = () => {
     // ...
   }, [isOpen])
 
-  // Called when isOpen change, also on mount
+  // Called when isOpen change but also on mount
   useDidUpdate(() => {
     // ...
   }, [isOpen], true)

src/hooks/use-did-mount.hook.ts

@@ -2,5 +2,3 @@ import { useEffect } from "react";
 
 export const useDidMount = (callback: VoidFunction | (() => VoidFunction)) =>
   useEffect(callback, []);
-
-export default useDidMount;

src/hooks/use-did-render.hook.ts

@@ -2,5 +2,3 @@ import { useLayoutEffect } from "react";
 
 export const useDidRender = (callback: VoidFunction, dependencies: any[] = []) =>
   useLayoutEffect(callback, dependencies);
-
-export default useDidRender;

src/hooks/use-did-update.hook.ts

@@ -16,5 +16,3 @@ export const useDidUpdate = (
     return callback();
   }, dependencies);
 };
-
-export default useDidUpdate;

src/hooks/use-force-update.hook.ts

@@ -0,0 +1,7 @@
+import { useState } from "react";
+
+export const useForceUpdate = () => {
+  const [, rerender] = useState(0);
+
+  return () => rerender((prev) => prev + 1);
+};

src/hooks/use-is-mounted.hook.ts

@@ -10,5 +10,3 @@ export const useIsMounted = () => {
   }, []);
   return componentIsMounted.current;
 };
-
-export default useIsMounted;

src/hooks/use-will-mount.hook.ts

@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+export const useWillMount = (callback: VoidFunction) => {
+  useState(callback);
+};

src/hooks/use-will-unmount.hook.ts

@@ -1,5 +1,3 @@
 import { useEffect } from "react";
 
 export const useWillUnmount = (callback: VoidFunction) => useEffect(() => callback, []);
-
-export default useWillUnmount;

src/index.ts

@@ -1,5 +1,7 @@
 // export * from "./lib" // export library entry point
 
+export * from "./hooks/use-force-update.hook";
+export * from "./hooks/use-will-mount.hook";
 export * from "./hooks/use-did-mount.hook";
 export * from "./hooks/use-did-render.hook";
 export * from "./hooks/use-did-update.hook";