Skip to content

trendmicro-frontend/react-notifications

Repository files navigation

react-notifications build status Coverage Status

NPM

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
  1. 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