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.

1
import * as React from "react";
2
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.

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



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.

1
class ExampleOne extends React.Component {
2
  state = {
3
    count: 0,
4
  };
5


6
  _handleCreate = (detail) => {
7
    dispatchCustomEvent({ name: "create-notification", detail: detail });
8
    this.setState({ count: this.state.count + 1 });
9
  };
10


11
  _handleDelete = () => {
12
    dispatchCustomEvent({ name: "delete-notification", detail: {} });
13
  };
14


15
  render() {
16
    return (
17
      <React.Fragment>
18
        <ButtonSecondary
19
          full
20
          onClick={() =>
21
            this._handleCreate({
22
              id: this.state.count,
23
              description: "This is notification number " + this.state.count,
24
            })
25
          }
26
        >
27
          Click for notification
28
        </ButtonSecondary>
29
        <br />
30
        <ButtonSecondary
31
          full
32
          onClick={() =>
33
            this._handleCreate({
34
              id: this.state.count,
35
              description: "This is a dark notification",
36
              dark: true,
37
            })
38
          }
39
        >
40
          Click for dark style notification
41
        </ButtonSecondary>
42


43
        <ButtonPrimary full onClick={this._handleDelete}>
44
          Click to clear notifications
45
        </ButtonPrimary>
46
      </React.Fragment>
47
    );
48
  }
49
}



Notification with timeout




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

1
class ExampleTwo extends React.Component {
2
  state = {
3
    count: 0,
4
  };
5


6
  _handleCreate = (detail) => {
7
    dispatchCustomEvent({ name: "create-notification", detail: detail });
8
    this.setState({ count: this.state.count + 1 });
9
  };
10


11
  render() {
12
    return (
13
      <React.Fragment>
14
        <ButtonSecondary
15
          full
16
          onClick={() =>
17
            this._handleCreate({
18
              id: this.state.count,
19
              description: "This disappears after 5 seconds",
20
              timeout: 5000,
21
            })
22
          }
23
        >
24
          Click for disappearing notification
25
        </ButtonSecondary>
26


27
        <ButtonPrimary full onClick={this._handleDelete}>
28
          Click to clear notifications
29
        </ButtonPrimary>
30
      </React.Fragment>
31
    );
32
  }
33
}



Notification with status








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

1
class ExampleThree extends React.Component {
2
  state = {
3
    count: 0,
4
  };
5


6
  _handleCreate = (detail) => {
7
    dispatchCustomEvent({ name: "create-notification", detail: detail });
8
    this.setState({ count: this.state.count + 1 });
9
  };
10


11
  _handleDelete = () => {
12
    dispatchCustomEvent({ name: "delete-notification", detail: {} });
13
  };
14


15
  render() {
16
    return (
17
      <React.Fragment>
18
        <ButtonSecondary
19
          full
20
          onClick={() =>
21
            this._handleCreate({
22
              id: this.state.count,
23
              description: "This is an info notification",
24
              status: "INFO",
25
            })
26
          }
27
        >
28
          Click for info style notification
29
        </ButtonSecondary>
30


31
        <ButtonSecondary
32
          full
33
          onClick={() =>
34
            this._handleCreate({
35
              id: this.state.count,
36
              description: "This is a success notification",
37
              status: "SUCCESS",
38
            })
39
          }
40
        >
41
          Click for success style notification
42
        </ButtonSecondary>
43


44
        <ButtonSecondary
45
          full
46
          onClick={() =>
47
            this._handleCreate({
48
              id: this.state.count,
49
              description: "This is a warning notification",
50
              status: "WARNING",
51
            })
52
          }
53
        >
54
          Click for warning style notification
55
        </ButtonSecondary>
56


57
        <ButtonSecondary
58
          full
59
          onClick={() =>
60
            this._handleCreate({
61
              id: this.state.count,
62
              description: "This is an error notification",
63
              status: "ERROR",
64
            })
65
          }
66
        >
67
          Click for error style notification
68
        </ButtonSecondary>
69


70
        <ButtonPrimary full onClick={this._handleDelete}>
71
          Click to clear notifications
72
        </ButtonPrimary>
73
      </React.Fragment>
74
    );
75
  }
76
}


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 Tabs3D CardCheckboxesColorsDropdownsHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTagsTogglesTooltipsTypography
View source