patch: fix body locking unnecessarily (#12)

.changeset/serious-kiwis-promise.md

@@ -0,0 +1,5 @@
+---
+"@wethegit/react-modal": patch
+---
+
+Fixes and issue where the modal would lock the body even though `appendToBody` wasn't set to `true`

src/lib/components/modal-inner/modal-inner.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from "react"
-import { usePreventScroll } from "@wethegit/react-hooks"
 
 import { classnames } from "../../../utils/classnames"
 
@@ -24,8 +23,6 @@ export function ModalInner({ children, className, ...props }: ModalInnerProps) {
   const firstFocusableElement = useRef<HTMLDivElement>(null)
   const lastFocusableElement = useRef<HTMLDivElement>(null)
 
-  usePreventScroll(true)
-
   const focusStartingPosition = () => {
     const element = firstFocusableElement.current
     if (element) element.focus()

src/lib/components/modal/modal.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from "react-dom"
+import { usePreventScroll } from "@wethegit/react-hooks"
 
 import { ModalInner } from "../modal-inner"
 import type { ModalInnerProps } from "../modal-inner"
@@ -15,6 +16,8 @@ export interface ModalProps extends ModalInnerProps {
 }
 
 export function Modal({ appendToBody, className, ...props }: ModalProps) {
+  usePreventScroll(appendToBody)
+
   if (appendToBody) return ReactDOM.createPortal(<ModalInner {...props} />, document.body)
   else
     return (

src/main.tsx

@@ -20,7 +20,7 @@ function CustomModal() {
       </button>
 
       {isOpen && (
-        <Modal>
+        <Modal appendToBody>
           <ModalBackdrop onClick={toggle} className={styles.CustomModalOverlay} />
           <ModalContent className={classnames([styles.CustomModalContent])}>
             <button onClick={toggle} className={styles.CustomModalClose}>