@trendmicro/react-notifications

    1.0.1 • Public • Published

    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

    Install

    npm i @trendmicro/react-notifications

    DownloadsWeekly Downloads

    296

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    55.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase