Modals

Modal

Storybook

The Modal component in React allows you to create custom dialogs that grab the user's attention or provide important information. By displaying content in a separate window that overlays the rest of the page, Modals can be a powerful tool for prompting user actions or displaying critical data. With the ability to fully customize the content and appearance of your Modal, you can create a unique user experience that enhances the usability and effectiveness of your web application.

Imports

1import { Modal } from 'dd360-ds'

Usage

Use the Modal component as shown below:

The code snippet below shows how to use the Modal component:

1import { Modal } from 'dd360-ds''
2
3<Modal active={true} setCloseModal={() => alert('function to close the modal')}>
4    This is an example modal
5</Modal>
6

Animation

With the prop animation you can add an animation when opening the modal

1import { Modal } from 'dd360-ds''
2
3<Modal animation active={true} setCloseModal={() => alert('function to close the modal')}>
4    This is an example modal
5</Modal>
6

Overlay

With the prop overlay you can add a gray background to the screen

1import { Modal } from 'dd360-ds''
2
3<Modal overlay active={true} setCloseModal={() => alert('function to close the modal')}>
4    This is an example modal
5</Modal>
6

FullScreen

With the prop fullScreen you can make the modal take up the whole screen

1import { Modal } from 'dd360-ds''
2
3<Modal fullScreen active={true} setCloseModal={() => alert('function to close the modal')}>
4    This is an example modal
5</Modal>
6

API Reference