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


Components
Avatar GroupButtonsCard Tabs3D CardCheckboxesColorsDropdownsHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTagsTogglesTooltipsTypography
View source