react-notifications, ReactJS的通知组件

分享于 

4分钟阅读

GitHub

  繁體 雙語
Notification component for ReactJS
  • 源代码名称:react-notifications
  • 源代码网址:http://www.github.com/minhtranite/react-notifications
  • react-notifications源代码文档
  • react-notifications源代码下载
  • Git URL:
    git://www.github.com/minhtranite/react-notifications.git
    Git Clone代码到本地:
    git clone http://www.github.com/minhtranite/react-notifications
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/minhtranite/react-notifications
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应通知

    安装

    
    npm install --save react-notifications
    
    
    
    

    用法

    注释

    只在应用程序中使用一个'notificationContainer'组件。

    CSS

    web web pack:
    import'react-notifications/lib/notifications.css';
    其他
    <linkrel="stylesheet"type="text/css"href="path/to/notifications.css">

    JS

    importReactfrom'react';import {NotificationContainer, NotificationManager} from'react-notifications';classExampleextendsReact.Component {
     createNotification= (type) => {
     return () => {
     switch (type) {
     case'info':
     NotificationManager.info('Info message');
     break;
     case'success':
     NotificationManager.success('Success message', 'Title here');
     break;
     case'warning':
     NotificationManager.warning('Warning message', 'Close after 3000ms', 3000);
     break;
     case'error':
     NotificationManager.error('Error message', 'Click me!', 5000, () => {
     alert('callback');
     });
     break;
     }
     };
     };
     render() {
     return (
     <div><button className='btn btn-info' onClick={this.createNotification('info')}>Info
     </button><hr/><button className='btn btn-success' onClick={this.createNotification('success')}>Success
     </button><hr/><button className='btn btn-warning' onClick={this.createNotification('warning')}>Warning
     </button><hr/><button className='btn btn-danger' onClick={this.createNotification('error')}>Error</button><NotificationContainer/></div> );
     }
    }exportdefaultExample;

    UMD

    <linkrel="stylesheet"type="text/css"href="path/to/react-notifications/dist/react-notifications.css">
    <scriptsrc="path/to/react-notifications/dist/react-notifications.js"></script>
    constNotificationContainer=window.ReactNotifications.NotificationContainer;constNotificationManager=window.ReactNotifications.NotificationManager;

    这里是示例

    NotificationContainer Props

    需要名称类型默认值
    enterTimeout号码400false
    leaveTimeout号码400false

    NotificationManager API

    • NotificationManager.info(message, title, timeOut, callback, priority) ;
    • NotificationManager.success(message, title, timeOut, callback, priority) ;
    • NotificationManager.warning(message, title, timeOut, callback, priority) ;
    • NotificationManager.error(message, title, timeOut, callback, priority) ;
    名称 类型 描述
    邮件字符串消息字符串
    标题字符串标题字符串
    超时整型弹出超时以毫秒为单位
    回拨函数单击弹出按钮时激发的函数
    优先级布尔型如果 true,消息将被插入到顶部

    示例

    查看演示插件或者示例文件夹。