react-toaster

    0.0.3 • Public • Published

    React-toaster

    A toast style message tip of React

    Installation

    npm install react-toaster --save-dev

    Usage

    • Basic:
    var Demo = React.createClass({
        displayName: 'ReactToasterDemo',
        onShow: function(){
            this.refs.toast.show('<span>Hei, hei</span>');
        },
        onHide: function(){
            this.refs.toast.hide();
        },
        render: function(){
            return (
                <div className="demo">
                    <ReactToaster ref="toast" />
                    <input type="button" value="Show" onClick={this.onShow}/>
                    <input type="button" value="Hide" onClick={this.onHide}/>
                </div>
            );
        }
    });
    • Configuration:
    // css
    {
        width: '55%',
        left: '20%',
        top: '40%',
        color: '#fff',
        background: 'rgba(0, 0, 0, 0.5)',
        opacity: .8,
        zIndex: 9999,
        fontSize: '20px'
    }
     
    // props
    {
        auto: true, // auto hide or not,
        duration: 2000,  // hide timeout
        modal: false, // modal or not
    }
     
    // usage
    <ReactToaster ref="toast" duration="1000" modal={false} auto={true} css={{background: 'red'}} />
    • Methods
    show: 
        Show the toast with content;
    hide: 
        Hide the toast manually.
    • Maybe it's more suitable for Mobile Web App.

    Release History

    • 0.0.1
      • It's the simplest implementation.
    • 0.0.2
      • add fontSize property and update doc.
    • 0.0.3
      • support modal;
      • extract style custom with css props.

    Install

    npm i react-toaster

    DownloadsWeekly Downloads

    24

    Version

    0.0.3

    License

    none

    Last publish

    Collaborators

    • haolin