Notifications View Source



The Notification component is used to alert a user of new information.



Imports


Import React and the Notification Component, as well as the dispatchCustomEvent function.

0
import * as React from "react";
1
import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";



Usage


Declare the component at the root level of your document (e.g. in index.js or App.js) so it is accessible throughout and will not get buried in the DOM tree.

Use style to specify placement of the fixed positioning notification list. Default is bottom right.

0
class App extends React.Component {
1
  render() {
2
    return (
3
      <React.Fragment>
4
        <GlobalNotification style={{ bottom: 0, right: 0 }} />
5
        {this.props.children}
6
      </React.Fragment>
7
    );
8
  }
9
}



Notification





A notification will only appear once you trigger it by creating a custom event with the title "create-notification". It can be removed with a custom event entitled "delete-notification".

Multiple stacked notifications can be created using a single Notification component. Each co-existing notification must have a unique id.

0
class ExampleOne extends React.Component {
1
  state = {
2
    count: 0,
3
  };
4
5
  _handleCreate = (detail) => {
6
    dispatchCustomEvent({ name: "create-notification", detail: detail });
7
    this.setState({ count: this.state.count + 1 });
8
  };
9
10
  _handleDelete = () => {
11
    dispatchCustomEvent({ name: "delete-notification", detail: {} });
12
  };
13
14
  render() {
15
    return (
16
      <React.Fragment>
17
        <ButtonSecondary
18
          full
19
          onClick={() =>
20
            this._handleCreate({
21
              id: this.state.count,
22
              description: "This is notification number " + this.state.count,
23
            })
24
          }
25
        >
26
          Click for notification
27
        </ButtonSecondary>
28
        <br />
29
        <ButtonSecondary
30
          full
31
          onClick={() =>
32
            this._handleCreate({
33
              id: this.state.count,
34
              description: "This is a dark notification",
35
              dark: true,
36
            })
37
          }
38
        >
39
          Click for dark style notification
40
        </ButtonSecondary>
41
42
        <ButtonPrimary full onClick={this._handleDelete}>
43
          Click to clear notifications
44
        </ButtonPrimary>
45
      </React.Fragment>
46
    );
47
  }
48
}



Notification with timeout




You can declare the Notification component with a timeout (in milliseconds) after which it will automatically disappear.

0
class ExampleTwo extends React.Component {
1
  state = {
2
    count: 0,
3
  };
4
5
  _handleCreate = (detail) => {
6
    dispatchCustomEvent({ name: "create-notification", detail: detail });
7
    this.setState({ count: this.state.count + 1 });
8
  };
9
10
  render() {
11
    return (
12
      <React.Fragment>
13
        <ButtonSecondary
14
          full
15
          onClick={() =>
16
            this._handleCreate({
17
              id: this.state.count,
18
              description: "This disappears after 5 seconds",
19
              timeout: 5000,
20
            })
21
          }
22
        >
23
          Click for disappearing notification
24
        </ButtonSecondary>
25
26
        <ButtonPrimary full onClick={this._handleDelete}>
27
          Click to clear notifications
28
        </ButtonPrimary>
29
      </React.Fragment>
30
    );
31
  }
32
}



Notification with status








Declare the Notification component with a status to style it accordingly. This is overridden if dark is set to true.

0
class ExampleThree extends React.Component {
1
  state = {
2
    count: 0,
3
  };
4
5
  _handleCreate = (detail) => {
6
    dispatchCustomEvent({ name: "create-notification", detail: detail });
7
    this.setState({ count: this.state.count + 1 });
8
  };
9
10
  _handleDelete = () => {
11
    dispatchCustomEvent({ name: "delete-notification", detail: {} });
12
  };
13
14
  render() {
15
    return (
16
      <React.Fragment>
17
        <ButtonSecondary
18
          full
19
          onClick={() =>
20
            this._handleCreate({
21
              id: this.state.count,
22
              description: "This is an info notification",
23
              status: "INFO",
24
            })
25
          }
26
        >
27
          Click for info style notification
28
        </ButtonSecondary>
29
30
        <ButtonSecondary
31
          full
32
          onClick={() =>
33
            this._handleCreate({
34
              id: this.state.count,
35
              description: "This is a success notification",
36
              status: "SUCCESS",
37
            })
38
          }
39
        >
40
          Click for success style notification
41
        </ButtonSecondary>
42
43
        <ButtonSecondary
44
          full
45
          onClick={() =>
46
            this._handleCreate({
47
              id: this.state.count,
48
              description: "This is a warning notification",
49
              status: "WARNING",
50
            })
51
          }
52
        >
53
          Click for warning style notification
54
        </ButtonSecondary>
55
56
        <ButtonSecondary
57
          full
58
          onClick={() =>
59
            this._handleCreate({
60
              id: this.state.count,
61
              description: "This is an error notification",
62
              status: "ERROR",
63
            })
64
          }
65
        >
66
          Click for error style notification
67
        </ButtonSecondary>
68
69
        <ButtonPrimary full onClick={this._handleDelete}>
70
          Click to clear notifications
71
        </ButtonPrimary>
72
      </React.Fragment>
73
    );
74
  }
75
}


Accepted React Properties


Notifications
NameTypeDefaultDescription
style
Object
{ bottom: 0, right: 0 }
Style object used to style the notification list positioning on the page



Accepted Create Notification Properties


Note that these properties are passed through a custom event rather than as react properties.

Notifications
NameTypeDefaultDescription
id
stringnumber
null
Notification id, must be unique for simultaneously existing notifications
status
string
null
Status which determines the styling and color of the notification. Use INFO, SUCCESS, WARNING, or ERROR
timeout
int
null
Number of milliseconds before the notification automatically disappears
label
string
null
Label text
description
string
null
Description text


ComponentsAvatar GroupButtonsCard TabsCheckboxesColorsDropdownsGlobeHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source