反应- toast

React.js 烤面包机组件

安装

npm i --save react-toastr

演示

静态托管 演示网站 (原始内容存档于2018-09-29). on GitHub.

示例

检查 弧/应用 文件夹.

使用量

此模块需要与 网络软件包/浏览验证和装入 react/addons 内部.
你得从这里下载动画Cs 动画@ github

样式的 Cs 链接 :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">

然后说:

var ReactToastr = require("react-toastr");
var {ToastContainer} = ReactToastr; // This is a React Element.
// For Non ES6...
// var ToastContainer = ReactToastr.ToastContainer;
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);

  // In a react component:
  render () {
    return (
      <div>
        <ToastContainer ref="container"
                        toastMessageFactory={ToastMessageFactory}
                        className="toast-top-right" />
        <button onClick={this.addAlert}>GGininder</button>
      </div>
    );
  }

以下是反应元素列表:

托斯特容器

这是所有的容器 ToastMessage 元素将去。 保留一个 参考 发布新的 祝酒词数字 :

  addAlert () {
    this.refs.container.success(
      "Welcome welcome welcome!!",
      "You are now home my friend. Welcome home my friend.", {
      timeOut: 30000,
      extendedTimeOut: 10000
    });
    window.open("http://youtu.be/3SR75k7Oggg");
  }

或与您的 通量 建筑?

  componentDidMount: function() {
    InInDerStore.addChangeListener(this.addAlert);
  }

选项

直接从 toastr.js 库,并可通过 props 反应方式 :

ToastContainer::getDefaultProps

关闭按钮

烤面包机上关闭的按钮是一个可选的功能.

  closeButton:true

超时

设定烤面包机消息自动关闭的时间( ms) .

  timeOut:5000

防止复制

这可以防止重复消息被触发.

  preventDuplicates:true

显示 HTML

要显示 HTML 只需通过 JSX 而非标题和信件参数的字符串 :

this.refs.container.success(
  <strong>I am a strong title</strong>,
  <em>I am an emphasized message</em>
});

敬酒会

持有祝酒词的基础课, 它不会在它的生命周期内动能进出. 提供 ToastMessage.animation 财务报告和审定财务报表 ToastMessage.jQuery 为你选择.

选项

直接从 toastr.js 库,并可通过 props 反应方式 :

• ToastMessage::getDefaultProps
• ToastMessage.animation::getDefaultProps 功劳给 @ 贾内克
• ToastMessage.jQuery::getDefaultProps