• /
  • Log in
  • Free account

Modal

Modals are used for single-step create, add, edit, or delete actions. They are also used to display additional metadata about a screen or specific object on the screen.

Usage

import { Modal } from 'nr1'

Examples

Basic

1
class MyNerdlet extends React.PureComponent {
2
constructor() {
3
super(...arguments);
4
5
this._onClose = this._onClose.bind(this);
6
7
this.state = {
8
hidden: true,
9
};
10
}
11
12
_onClose() {
13
this.setState({ hidden: true });
14
}
15
16
render() {
17
return (
18
<>
19
<Button onClick={() => this.setState({ hidden: false })}>
20
Open modal
21
</Button>
22
23
<Modal hidden={this.state.hidden} onClose={this._onClose}>
24
<HeadingText type={HeadingText.TYPE.HEADING_1}>Modal</HeadingText>
25
26
<BlockText type={BlockText.TYPE.PARAGRAPH}>
27
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
28
eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst
29
quisque sagittis purus sit amet.
30
</BlockText>
31
32
<Button onClick={this._onClose}>Close</Button>
33
</Modal>
34
</>
35
);
36
}
37
}

Unmounting

1
class MyNerdlet extends React.PureComponent {
2
constructor() {
3
super(...arguments);
4
5
this._onClick = this._onClick.bind(this);
6
this._onClose = this._onClose.bind(this);
7
this._onHideEnd = this._onHideEnd.bind(this);
8
9
this.state = {
10
hidden: true,
11
mounted: false,
12
};
13
}
14
15
_onClick() {
16
this.setState({
17
hidden: false,
18
mounted: true,
19
});
20
}
21
22
_onClose() {
23
this.setState({ hidden: true });
24
}
25
26
_onHideEnd() {
27
this.setState({ mounted: false });
28
}
29
30
render() {
31
return (
32
<>
33
<Button onClick={this._onClick}>Open modal</Button>
34
35
{this.state.mounted && (
36
<Modal
37
hidden={this.state.hidden}
38
onClose={this._onClose}
39
onHideEnd={this._onHideEnd}
40
>
41
<HeadingText type={HeadingText.TYPE.HEADING_1}>Modal</HeadingText>
42
43
<BlockText type={BlockText.TYPE.PARAGRAPH}>
44
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
45
eiusmod tempor incididunt ut labore et dolore magna aliqua.
46
Dictumst quisque sagittis purus sit amet.
47
</BlockText>
48
49
<Button onClick={this._onClose}>Close</Button>
50
</Modal>
51
)}
52
</>
53
);
54
}
55
}

Props

childrennode

Content to render inside the modal.

classNamestring

Appends class names to the component.

hiddenboolean
DEFAULT
false

If true, the modal is hidden.

onCloserequiredfunction

Callback fired when clicking on the Modal's close button.

function () => undefined
onHideEndfunction

Callback fired when the Modal finishes the closing animation.

Use this to unmount the Modal component. This ensures that the closing animation works properly.

function () => undefined

Example 1

1
function render() {
2
<>
3
{this.state.mounted && (
4
<Modal
5
hidden={this.state.hidden}
6
onHideEnd={() => this.setState({ mounted: false })}
7
onClose={() => this.setState({ hidden: true })}
8
>
9
<h1>Modal</h1>
10
<p>
11
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
12
eiusmod tempor incididunt ut labore et dolore magna aliqua.
13
</p>
14
</Modal>
15
)}
16
</>;
17
}
onHideStartfunction

Callback fired when the Modal starts the closing animation.

function () => undefined
onShowEndfunction

Callback fired when the Modal finishes the opening animation.

function () => undefined
onShowStartfunction

Callback fired when the Modal starts the opening animation.

function () => undefined
styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

Methods

Modal.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.