From e1af3059904ebe36f8c70919460f4eee51191859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Edgar=20L=C3=B3pez?= <edgar.lr.18@gmail.com>
Date: Fri, 17 Mar 2023 08:59:21 -0600
Subject: [PATCH 1/2] Add usage example using React Hooks

---
 README.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/README.md b/README.md
index 5d2b0e27..613f33a5 100644
--- a/README.md
+++ b/README.md
@@ -166,6 +166,52 @@ class SomeOtherComponent extends React.Component {
 ```
 
 
+##### React Hooks/ES6 with Refs
+
+```javascript
+// 1. Import the functions
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+
+const SomeComponent = () => {
+  // 2. Initialise your state and ref here
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  
+  useEffect(() => {
+    // 3. Check for the target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
+    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
+    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
+    
+    if (ref.current) {
+      if (open) {   
+        // 4. Disable body scroll when open
+        disabledBodyScrollLock(ref.current)
+      } else {
+        // 5. Re-enable body scroll when closed
+        enableBodyScrollLock(ref.current)
+      }
+    }
+
+    return () => {
+        // 5. Useful if we have called disableBodyScroll for multiple target elements,
+        // and we just want a kill-switch to undo all that.
+        // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
+        // clicks a link which takes him/her to a different page within the app.
+      clearAllBodyScrollLocks() 
+    }
+  }, [open])
+
+  return (
+      // 6. Pass your ref to SomeOtherComponent
+      <SomeOtherComponent ref={ref}>
+        {/* some JSX to go here */}
+      </SomeOtherComponent>
+    );
+  }
+}
+```
+
+
 ##### Angular
 
 ```javascript

From c737853725febac709793ddeff82fa8855246d42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Edgar=20L=C3=B3pez?= <edgar.lr.18@gmail.com>
Date: Fri, 17 Mar 2023 09:01:47 -0600
Subject: [PATCH 2/2] Update README.md

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 613f33a5..721406f1 100644
--- a/README.md
+++ b/README.md
@@ -193,16 +193,16 @@ const SomeComponent = () => {
     }
 
     return () => {
-        // 5. Useful if we have called disableBodyScroll for multiple target elements,
-        // and we just want a kill-switch to undo all that.
-        // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
-        // clicks a link which takes him/her to a different page within the app.
+      // 5. Useful if we have called disableBodyScroll for multiple target elements,
+      // and we just want a kill-switch to undo all that.
+      // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
+      // clicks a link which takes him/her to a different page within the app.
       clearAllBodyScrollLocks() 
     }
   }, [open])
-
+  
+  // 6. Pass your ref to SomeOtherComponent
   return (
-      // 6. Pass your ref to SomeOtherComponent
       <SomeOtherComponent ref={ref}>
         {/* some JSX to go here */}
       </SomeOtherComponent>