Fix positioning when appendToBody

.changeset/green-ravens-return.md

@@ -0,0 +1,5 @@
+---
+"@wethegit/react-modal": minor
+---
+
+Fix: positiong class names not being passed down if appendToBody is true

.vscode/settings.json

@@ -5,7 +5,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "eslint.format.enable": true,
   "eslint.nodePath": "",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/react-modal",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A customizable, accessible modal window component for React projects.",
   "files": [
     "dist"

src/lib/components/modal-inner/modal-inner.module.scss

@@ -1,9 +1,8 @@
 .modalInner {
+  align-items: center;
+  display: flex;
   inset: 0;
-  position: fixed;
+  justify-content: center;
   width: 100%;
   z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }

src/lib/components/modal/modal.tsx

@@ -18,15 +18,17 @@ 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 (
-      <ModalInner
-        className={classnames([
-          appendToBody ? styles.ModalFixed : styles.ModalAbsolute,
-          className,
-        ])}
-        {...props}
-      />
+  const classes = classnames([
+    appendToBody ? styles.ModalFixed : styles.ModalAbsolute,
+    className,
+  ])
+
+  if (appendToBody) {
+    return ReactDOM.createPortal(
+      <ModalInner className={classes} {...props} />,
+      document.body
     )
+  } else {
+    return <ModalInner className={classes} {...props} />
+  }
 }