react-toaster
v0.0.3
Published
A toast of React
Downloads
118
Maintainers
Readme
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.