Modal

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_3}>Modal</HeadingText>
25

26
          <BlockText
27
            spacingType={[
28
              BlockText.SPACING_TYPE.EXTRA_LARGE,
29
              BlockText.SPACING_TYPE.OMIT,
30
            ]}
31
          >
32
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
33
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst
34
            quisque sagittis purus sit amet.
35
          </BlockText>
36

37
          <Button onClick={this._onClose}>Close</Button>
38
        </Modal>
39
      </>
40
    );
41
  }
42
}

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_3}>Modal</HeadingText>
42

43
            <BlockText
44
              spacingType={[
45
                BlockText.SPACING_TYPE.EXTRA_LARGE,
46
                BlockText.SPACING_TYPE.OMIT,
47
              ]}
48
            >
49
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
50
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
51
              Dictumst quisque sagittis purus sit amet.
52
            </BlockText>
53

54
            <Button onClick={this._onClose}>Close</Button>
55
          </Modal>
56
        )}
57
      </>
58
    );
59
  }
60
}

Props

ariaLabelledBystring

Pass the string of the text content which should better describe the purpose of the modal to be correctly announced by screen readers.

Correctly labelled Modal

1
const modalLabelId = 'my-nerdlet.my-modal';
2

3
<Modal ariaLabelledBy={modalLabelId}>
4
  <span id={modalLabelId}>
5
    <HeadingText>My modal</HeadingText>
6
  </span>
7
</Modal>;

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.

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.

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.

onShowEndfunction

Callback fired when the Modal finishes the opening animation.

onShowStartfunction

Callback fired when the Modal starts the opening animation.

styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.