DModal
A flexible modal dialog component with animation support.
Import
import { DModal } from '@dynamic-framework/ui-react';
TypeScript Interface
type Props = BaseProps & PropsWithChildren<{
name: string;
staticBackdrop?: boolean;
scrollable?: boolean;
centered?: boolean;
fullScreen?: boolean;
fullScreenFrom?: ModalFullScreenFrom;
size?: ModalSize;
transition?: Transition;
}>;
type ModalSize = 'sm' | 'lg' | 'xl';
type ModalFullScreenFrom = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
type BaseProps = {
style?: CSSProperties;
className?: string;
dataAttributes?: DataAttributes;
};
Props
Unique identifier for the modal. Used for accessibility attributes.
If true, prevents closing the modal when clicking outside or pressing escape.
If true, makes the modal body scrollable when content exceeds viewport height.
If true, vertically centers the modal in the viewport.
If true, makes the modal full screen.
Breakpoint from which the modal becomes full screen. Options: 'sm', 'md', 'lg', 'xl', 'xxl'.
Size variant of the modal. Options: 'sm', 'lg', 'xl'.
Custom Framer Motion transition configuration for modal animations.
Additional CSS classes to apply to the modal.
Inline styles to apply to the modal.
dataAttributes
Record<`data-${string}`, string | number | undefined | null | boolean>
Custom data attributes to add to the modal element.
Modal content (typically DModal.Header, DModal.Body, and DModal.Footer).
Header section for the modal with optional close button.
TypeScript Interface
type Props = BaseProps &
FamilyIconProps &
PropsWithChildren<{
showCloseButton?: boolean;
icon?: string;
materialStyle?: boolean;
onClose?: () => void;
}>;
Props
If true, displays a close button in the header.
Custom icon for the close button. Uses default if not provided.
Whether to use Material Design style for the close icon.
CSS class for the icon font family.
Prefix for the icon font family.
Callback function when close button is clicked.
Content to display in the header (typically the modal title).
DModal.Body
Main content section for the modal.
TypeScript Interface
type Props = BaseProps & {
children: ReactNode;
};
Props
Additional CSS classes to apply to the modal body.
Inline styles to apply to the modal body.
Content to display in the modal body.
Footer section for the modal with action button placement options.
TypeScript Interface
type Props = BaseProps & PropsWithChildren<{
actionPlacement?: 'start' | 'end' | 'fill' | 'center';
}>;
Props
actionPlacement
'start' | 'end' | 'fill' | 'center'
Controls the alignment of action buttons in the footer.
Additional CSS classes to apply to the modal footer.
Inline styles to apply to the modal footer.
Content to display in the footer (typically action buttons).
Usage Examples
Basic Modal
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<DButton text="Open Modal" onClick={() => setIsOpen(true)} />
{isOpen && (
<DModal name="basicModal">
<DModal.Header showCloseButton onClose={() => setIsOpen(false)}>
<h5>Modal Title</h5>
</DModal.Header>
<DModal.Body>
<p>This is the modal content.</p>
</DModal.Body>
<DModal.Footer>
<DButton text="Close" onClick={() => setIsOpen(false)} />
</DModal.Footer>
</DModal>
)}
</>
);
}
Centered Modal
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<DButton text="Open Centered Modal" onClick={() => setIsOpen(true)} />
{isOpen && (
<DModal name="centeredModal" centered>
<DModal.Header showCloseButton onClose={() => setIsOpen(false)}>
<h5>Centered Modal</h5>
</DModal.Header>
<DModal.Body>
<p>This modal is vertically centered.</p>
</DModal.Body>
</DModal>
)}
</>
);
}
Size Variants
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [size, setSize] = useState<'sm' | 'lg' | 'xl' | undefined>();
return (
<>
<div className="d-flex gap-2">
<DButton text="Small" onClick={() => setSize('sm')} size="sm" />
<DButton text="Default" onClick={() => setSize(undefined)} />
<DButton text="Large" onClick={() => setSize('lg')} size="sm" />
<DButton text="Extra Large" onClick={() => setSize('xl')} size="sm" />
</div>
{size !== undefined && (
<DModal name="sizeModal" size={size}>
<DModal.Header showCloseButton onClose={() => setSize(undefined)}>
<h5>{size ? `${size.toUpperCase()} Modal` : 'Default Modal'}</h5>
</DModal.Header>
<DModal.Body>
<p>This is a {size || 'default'} sized modal.</p>
</DModal.Body>
</DModal>
)}
</>
);
}
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<DButton text="Open Scrollable Modal" onClick={() => setIsOpen(true)} />
{isOpen && (
<DModal name="scrollableModal" scrollable>
<DModal.Header showCloseButton onClose={() => setIsOpen(false)}>
<h5>Scrollable Modal</h5>
</DModal.Header>
<DModal.Body>
{Array.from({ length: 20 }).map((_, i) => (
<p key={i}>This is paragraph {i + 1} of the modal content.</p>
))}
</DModal.Body>
<DModal.Footer>
<DButton text="Close" onClick={() => setIsOpen(false)} />
</DModal.Footer>
</DModal>
)}
</>
);
}
Full Screen Modal
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<DButton text="Open Full Screen Modal" onClick={() => setIsOpen(true)} />
{isOpen && (
<DModal name="fullScreenModal" fullScreen>
<DModal.Header showCloseButton onClose={() => setIsOpen(false)}>
<h5>Full Screen Modal</h5>
</DModal.Header>
<DModal.Body>
<p>This modal takes up the entire screen.</p>
</DModal.Body>
</DModal>
)}
</>
);
}
Responsive Full Screen
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<DButton text="Open Modal" onClick={() => setIsOpen(true)} />
{isOpen && (
<DModal
name="responsiveModal"
fullScreen
fullScreenFrom="md"
>
<DModal.Header showCloseButton onClose={() => setIsOpen(false)}>
<h5>Responsive Modal</h5>
</DModal.Header>
<DModal.Body>
<p>This modal is full screen below medium breakpoint.</p>
</DModal.Body>
</DModal>
)}
</>
);
}
Action Placement
import { DModal, DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<DButton text="Open Modal" onClick={() => setIsOpen(true)} />
{isOpen && (
<DModal name="actionsModal">
<DModal.Header showCloseButton onClose={() => setIsOpen(false)}>
<h5>Modal with Actions</h5>
</DModal.Header>
<DModal.Body>
<p>Choose an action below.</p>
</DModal.Body>
<DModal.Footer actionPlacement="end">
<DButton
text="Cancel"
variant="outline"
onClick={() => setIsOpen(false)}
/>
<DButton
text="Save Changes"
color="primary"
onClick={() => setIsOpen(false)}
/>
</DModal.Footer>
</DModal>
)}
</>
);
}