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