@murden.dev/lifecycle-hooks - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

package.json

 {
   "name": "@murden.dev/lifecycle-hooks",
-  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
-  "version": "0.0.1",
+  "description": "React Class Components lifecycle methods written as React Hooks for those that are transitioning from React Class Components or maybe just want a little more legibility in their code.",
+  "version": "1.0.0",
   "main": "index.js",
@@ -6,0 +6,0 @@ "dependencies": {

README.md

@@ -1,3 +0,33 @@
-# Use Lifecycle Hooks
+# @murden.dev/lifecycle-hooks
 
-For those that are transitioning from React Class Components or maybe just want a little more legibility in their code: `use-lifecycle-hooks`
+## React Class Components lifecycle methods written as React Hooks 
+
+For those that are transitioning from React Class Components or maybe just want a little more legibility in their code.
+
+
+### 1. Install package
+
+`npm install @murden.dev/lifecycle-hooks`
+
+### 2. Import package and enjoy lifecycle-hooks :)
+
+```js
+import { useOnMount, useOnUnmount, useOnUpdate } from '@murden.dev/lifecycle-hooks'
+
+const Component = () => {
+
+    useOnMount(() => {
+        // Function that runs only once, when Component is mounted
+    })
+
+    useOnUnmount(() => {
+        // Function that runs only once, when Component is about to be unmounted
+    })
+
+    useOnUpdate(() => {
+        // Function that runs on every Component re-render
+    })
+
+    // (...)
+}
+```

src/index.js

@@ -1,3 +0,3 @@
-export { default as onMount } from './onMount'
-export { default as onUnmount } from './onUnmount'
-export { default as onUpdate } from './onUpdate'
+export { default as useOnMount } from './onMount'
+export { default as useOnUnmount } from './onUnmount'
+export { default as useOnUpdate } from './onUpdate'

src/onMount.js

@@ -6,6 +6,5 @@ import { useEffect } from 'react'
     useEffect(() => {
-      console.log("Hey I just MOUNTED")
       callback()
-    }, [callback]) // Empty array to run callback once; on mount.
+    }, [callback])
   )
 }

src/onUnmount.js

@@ -7,7 +7,6 @@ import { useEffect } from 'react'
       return () => {
-        console.log("Hey I'm about to UNMOUNT")
         callback()
       }
-    }, [callback]) // Empty array to run callback once; only on cleanup (unmount).
+    }, [callback])
   )
 }

src/onUpdate.js

@@ -6,6 +6,5 @@ import { useEffect } from 'react'
     useEffect(() => {
-      console.log("Hey I just UPDATED")
       callback()
-    }) // Optional argument of an [] is not present. Will trigger on every re-render
+    })
   )
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

-50%

Number of lines in readme file

33

1000%

Worsened metrics

Total package byte prevSize

2235

-43.67%

Number of package files

6

-14.29%

Lines of code

25

-10.71%

No dependency changes