react-meerkat
Alerts for React
Demo
Installation
$ npm install --save react-meerkat
Templates
You can provide your own alert template if you need to. Otherwise you can just plug in one of the following:
Feel free to submit a PR with the link for your own template.
To get started, try installing the basic one:
$ npm install --save react-meerkat react-meerkat-template-basic
Peer dependencies
This package expect the following peer dependencies:
"prop-types": "^15.6.0""react": "^16.3.0""react-dom": "^16.3.0""react-transition-group": "^2.3.0"
So make sure that you have those installed too!
Usage
First you have to wrap your app with the Provider giving it the alert template and optionally some options:
// index.js // optional cofigurationconst options = position: 'bottom center' timeout: 5000 offset: '30px' transition: 'scale' { return <AlertProvider template=AlertTemplate ...options> <App /> </AlertProvider> }
Then you wrap the components that you want to be able to show alerts:
// App.js { return <button onClick= { thispropsalert } > Show Alert </button> } App
And that's it!
You can also use it with a render props API:
// App.js { return <Alert> <button onClick= { alert } > Show Alert </button> </Alert> }
Options
You can pass the following options as props to Provider
:
offset: PropTypesstring // the margin of each alertposition: PropTypes // the position of the alerts in the pagetimeout: PropTypesnumber // timeout to alert remove itself, if set to 0 it never removes itselftype: PropTypes // the default alert type used when calling this.props.alert.showtransition: PropTypes // the transition animationzIndex: PropTypesnumber // the z-index of alertstemplate: PropTypesisRequired // the alert template to be used
Here's the defaults:
offset: '10px'position: 'top center'timeout: 0type: 'info'transition: 'fade'zIndex: 100
Those options will be applied to all alerts.
API
When you wrap a component using withAlert
you receive the alert
prop. Here's all you can do with it:
// showconst alert = thispropsalert // info// just an alias to this.props.alert.show(msg, { type: 'info' })const alert = thispropsalert // success// just an alias to this.props.alert.show(msg, { type: 'success' })const alert = thispropsalert // error// just an alias to this.props.alert.show(msg, { type: 'error' })const alert = thispropsalert // remove// use it to remove an alert programmaticallythispropsalert
Using a custom alert template
If you ever need to have an alert just the way you want, you can provide your own template! Here's a simple example:
// index.js { // the style contains only the margin given as offset // options contains all alert given options // message is the alert message... // close is a function that closes the alert const style options message close = thisprops return <div style=style> optionstype === 'info' && '!' optionstype === 'success' && ':)' optionstype === 'error' && ':(' message <button onClick=close>X</button> </div> } { return <AlertProvider template=AlertTemplate> <App /> </AlertProvider> }
Easy, right?
Using a component as a message
You can also pass in a component as a message, like this:
thispropsalert
Special thank-you
react-meerkat
is a fork of react-alert
, written by schiehll. Thank you for all the work you put in.