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:

`js
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

$3

#### Controlled Notification

`js
const { dismissed } = this.state;

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

#### Uncontrolled Notification

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

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

$3

#### Controlled Toast Notification

`js
const { dismissed } = this.state;

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.

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

API

$3

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