@trendmicro/react-notifications

react-notifications

React Notifications

Demo: https://trendmicro-frontend.github.io/react-notifications

Installation

1. Install the latest version of react and react-notifications:

npm install --save react @trendmicro/react-notifications

2. At this point you can import @trendmicro/react-notifications and its styles in your application as follows:

import { Notification, ToastNotification } from '@trendmicro/react-notifications';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-notifications/dist/react-notifications.css';

Usage

Notification

Controlled Notification

const { dismissed } = this.state;

<Notification
    show={!dismissed}
    type="error"
    onDismiss={event => {
        this.setState({ dismissed: true });
    }}
/>

Uncontrolled Notification

Note: Always pass a new key while re-rendering uncontrolled notifications.

<Notification
    key={_.uniqueId()}
    type="error"
    onDismiss={event => { // Optional
        // Generate a new key if the notification is dismissed.
    }}
/>

Toast Notification

Controlled Toast Notification

const { dismissed } = this.state;

<ToastNotification
    show={!dismissed}
    type="warning"
    autoDismiss={5000}
    onDismiss={event => {
        this.setState({ dismissed: true });
    }}
/>

Uncontrolled Toast Notification

Note: Always pass a new key while re-rendering uncontrolled toast notifications.

<ToastNotification
    key={_.uniqueId()}
    type="warning"
    autoDismiss={5000}
    onDismiss={event => { // Optional
        // Generate a new key if the toast notification is dismissed.
    }}
/>

API

Properties

Name	Type	Default	Description
type	String	''	One of: 'error', 'warning', 'info', 'success'
show	Boolean	true	Whether or not the component is visible.
dismissible	Boolean	true	Whether or not the notification is dismissible.
autoDismiss	Number or Boolean	false	The auto dismiss timeout in milliseconds.
onDismiss	Function		A callback fired when the dismiss icon (x) is clicked.

License

MIT