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 {
4
<GlobalNotification style={{ bottom: 0, right: 0 }} />
Notification Click for notification Click for dark style notification Click to clear notifications 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 {
5
_handleCreate = (detail) => {
6
dispatchCustomEvent({ name: "create-notification", detail: detail });
7
this.setState({ count: this.state.count + 1 });
10
_handleDelete = () => {
11
dispatchCustomEvent({ name: "delete-notification", detail: {} });
22
description: "This is notification number " + this.state.count,
26
Click for notification
34
description: "This is a dark notification",
39
Click for dark style notification
42
<ButtonPrimary full onClick={this._handleDelete}>
43
Click to clear notifications
Notification with timeout Click for disappearing notification Click to clear notifications You can declare the Notification component with a timeout (in milliseconds) after which it will automatically disappear.
0
class ExampleTwo extends React.Component {
5
_handleCreate = (detail) => {
6
dispatchCustomEvent({ name: "create-notification", detail: detail });
7
this.setState({ count: this.state.count + 1 });
18
description: "This disappears after 5 seconds",
23
Click for disappearing notification
26
<ButtonPrimary full onClick={this._handleDelete}>
27
Click to clear notifications
Notification with status Click for info style notification Click for success style notification Click for warning style notification Click for error style notification Click to clear notifications 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 {
5
_handleCreate = (detail) => {
6
dispatchCustomEvent({ name: "create-notification", detail: detail });
7
this.setState({ count: this.state.count + 1 });
10
_handleDelete = () => {
11
dispatchCustomEvent({ name: "delete-notification", detail: {} });
22
description: "This is an info notification",
27
Click for info style notification
35
description: "This is a success notification",
40
Click for success style notification
48
description: "This is a warning notification",
53
Click for warning style notification
61
description: "This is an error notification",
66
Click for error style notification
69
<ButtonPrimary full onClick={this._handleDelete}>
70
Click to clear notifications
Accepted React Properties Name Type Default Description
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.
Name Type Default Description
id
string number
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