jsx style component

Author: sujon-co

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.6",
+  "version": "1.7.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Draggable.tsx

@@ -1,7 +1,11 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import styles from '../style/style.module.css';
+import * as styles from '../style/styles';
 
-export const Draggable: FC = ({ children }) => {
+interface IProps {
+    bodyStyle: React.CSSProperties;
+}
+
+export const Draggable: FC<IProps> = ({ children, bodyStyle }) => {
     const boxRef = useRef<HTMLDivElement>(null);
     const dragRef = useRef<HTMLDivElement>(null);
     const [isDragActive, setIsDragActive] = useState<boolean>(false);
@@ -47,8 +51,12 @@ export const Draggable: FC = ({ children }) => {
     }, [dragEndHandler, dragStartHandler, draggingHandler]);
 
     return (
-        <div ref={boxRef} className={styles.ReactPortalDialog__Body}>
-            <div ref={dragRef} className={styles.ReactPortalDialog__Move}>
+        <div ref={boxRef} style={bodyStyle} className="ReactPortalDialog__Body">
+            <div
+                ref={dragRef}
+                style={styles.ReactPortalDialog__Move}
+                className="ReactPortalDialog__Move"
+            >
                 Move Here
             </div>
             {children}

src/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Draggable } from './components/Draggable';
-import styles from './style/style.module.css';
+import * as styles from './style/styles';
 
 interface Props {
     isOpen: boolean;
@@ -23,10 +23,6 @@ const Modal: FC<Props> = ({
     const divRef = useRef<HTMLElement | null>(null);
     const [divCreated, setDivCreated] = useState<Boolean>(false);
 
-    const overlayStyle = {
-        backgroundColor: isOverlay ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
-    };
-
     useEffect(() => {
         if (isOpen) {
             bodyRef.current = document.querySelector('body');
@@ -47,21 +43,28 @@ const Modal: FC<Props> = ({
         divRef.current?.remove();
     };
 
+    const overlayStyle = {
+        ...styles.ReactPortalDialog__Overlay,
+        backgroundColor: isOverlay ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
+    };
+
+    const bodyStyle = customStyles || styles.ReactPortalDialog__Body;
+
     return divCreated && divRef.current
         ? ReactDOM.createPortal(
               <>
                   <div
                       style={overlayStyle}
-                      className={styles.ReactPortalDialog__Overlay}
+                      className="ReactPortalDialog__Overlay"
                       onClick={closeHandler}
                   />
 
                   {isDraggable ? (
-                      <Draggable>{children}</Draggable>
+                      <Draggable bodyStyle={bodyStyle}>{children}</Draggable>
                   ) : (
                       <div
-                          style={customStyles}
-                          className={styles.ReactPortalDialog__Body}
+                          style={bodyStyle}
+                          className="ReactPortalDialog__Body"
                       >
                           {children}
                       </div>

src/style/style.module.css

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const ReactPortalDialog__Overlay: React.CSSProperties = {
+    position: 'fixed',
+    inset: '0',
+    zIndex: '1000',
+};
+
+export const ReactPortalDialog__Body: React.CSSProperties = {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    maxHeight: '200px',
+    width: '400px',
+    backgroundColor: 'rgb(223, 221, 221)',
+    zIndex: '1000',
+    transform: 'translate(-50%, -50%)',
+};
+
+export const ReactPortalDialog__Move: React.CSSProperties = {
+    backgroundColor: 'salmon',
+    textAlign: 'center',
+    padding: '5px',
+    cursor: 'move',
+};