react-modal
Modal dialogs are used to get a response from a user before other features can be assessed from the main page.
Use one of these 4 modal sizes depending on your needs and requirements:
Auto | 400px (minimum width) |
Extra Small | 400px (fixed width) x 240 px (minimum height) |
Small | 544px (fixed width) x 304 px (minimum height) |
Medium | 688px (fixed width) x 304 px (minimum height) |
Large | 928px (fixed width) x 304 px (minimum height) |
Installation
- Install the latest version of react and react-modal:
npm install --save react @trendmicro/react-modal
- At this point you can import
@trendmicro/react-modal
and its styles in your application as follows:
Recommended Setup
Create a common components directory including both Buttons
and Modal
components, as shown below:
components/
Buttons/
index.js
Modal/
index.js
components/Buttons/index.js
components/Modal/index.js
Then, import Modal
component in your code:
Usage
Examples
Prevent Body From Scrolling
You can create a ModalWrapper component that changes the body style on open and close.
API
Properties
Name | Type | Default | Description |
---|---|---|---|
onClose | Function | A callback fired on clicking the overlay or the close button (x). | |
show | Boolean | true | Whether the modal is visible. |
showCloseButton | Boolean | true | Whether the close button (x) is visible. |
showOverlay | Boolean | true | Display an overlay in the background. Defaults to true . |
disableOverlay | Boolean | false | Don't close the modal on clicking the overlay. Defaults to false . |
overlayClassName | String | className to assign to modal overlay. | |
overlayStyle | Object | style to assign to modal overlay. | |
size | String | '' | One of: 'xs', 'sm', 'md', 'lg', 'extra-small', 'small', 'medium', 'large', or an empty string. Defaults to empty string that will automatically resize to fit contents. |
Size
Size | Dimension |
---|---|
Auto | 400px (minimum width) |
Extra Small | 400px (fixed width) x 240 px (minimum height) |
Small | 544px (fixed width) x 304 px (minimum height) |
Medium | 688px (fixed width) x 304 px (minimum height) |
Large | 928px (fixed width) x 304 px (minimum height) |