Merge pull request #16 from jakewtaylor/master

Allow passing classes to the modal div

Author: mbrookson

.github/workflows/main.yml

@@ -1,5 +1,5 @@
 name: CI
-on: [push]
+on: [push, pull_request]
 jobs:
   build:
     runs-on: ubuntu-latest

README.md

@@ -76,6 +76,9 @@ import 'react-simple-hook-modal/dist/styles.css';
 
 - `backdropClassName` which can contain one or more classes to append and override the default styles (e.g. Changing the backdrop colour can be done by adding the class `bg-blue-800`).
 
+`Modal` also takes optional props:
+- `modalClassName` which can contain one or more classes to append to the default modal div.
+
 # Example
 
 See the `example` directory in the repository for a full example including multiple stacked modals.

package-lock.json

@@ -10,6 +10,7 @@ export interface ModalProps {
   onBackdropClick?: () => void;
   footer?: React.ReactNode;
   transition?: ModalTransition;
+  modalClassName?: string;
 }
 
 function hasDOM() {

src/components/Modal.tsx

@@ -17,6 +17,7 @@ export const ModalContainer: React.FC<ModalProps & Props> = ({
   transition,
   onBackdropClick,
   transformDistance,
+  modalClassName,
 }) => {
   const modalTransitions = useModalTransition(transition, isOpen);
 
@@ -32,7 +33,8 @@ export const ModalContainer: React.FC<ModalProps & Props> = ({
               onClick={onBackdropClick}
             >
               <div
-                className="rsm-bg-white rsm-rounded-md rsm-overflow-auto rsm-max-h-full rsm-w-full md:rsm-w-10/12 xl:rsm-w-1/2 rsm-opactiy-100 rsm-shadow-lg rsm-z-50 rsm-border rsm-border-gray-200 rsm-flex rsm-flex-col"
+                className={`rsm-bg-white rsm-rounded-md rsm-overflow-auto rsm-max-h-full rsm-w-full md:rsm-w-10/12 xl:rsm-w-1/2 rsm-opactiy-100 rsm-shadow-lg rsm-z-50 rsm-border rsm-border-gray-200 rsm-flex rsm-flex-col ${modalClassName ??
+                  ''}`}
                 style={{
                   minHeight: '70%',
                   transition: