A simple react alert component
react-alert
2kb alerts for React.
Installation
$ npm install --save react-alert
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-alert react-alert-template-basic
Peer dependencies
This package expect the following peer dependencies:
"prop-types": "^15.6.2"
"react": "^16.8.1"
"react-dom": "^16.8.1"
"react-transition-group": "^2.5.3"
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
import React from 'react'
import { render } from 'react-dom'
import { Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import App from './App'
// optional cofiguration
const options = {
position: 'bottom center',
timeout: 5000,
offset: '30px',
transition: 'scale'
}
const Root = () => (
<AlertProvider template={AlertTemplate} {...options}>
<App />
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
Then import the useAlert hook to be able to show alerts:
// App.js
import React from 'react'
import { useAlert } from 'react-alert'
const App = () => {
const alert = useAlert()
return (
<button
onClick={() => {
alert.show('Oh look, an alert!')
}}
>
Show Alert
</button>
)
}
export default App
And that's it!
You can also use it with a HOC:
import React from 'react'
import { withAlert } from 'react-alert'
const App = ({ alert }) => (
<button
onClick={() => {
alert.show('Oh look, an alert!')
}}
>
Show Alert
</button>
)
export default withAlert()(App)
Options
You can pass the following options as props to Provider:
offset: PropTypes.string // the margin of each alert
position: PropTypes.oneOf([
'top left',
'top right',
'top center',
'bottom left',
'bottom right',
'bottom center'
]) // the position of the alerts in the page
timeout: PropTypes.number // timeout to alert remove itself, if set to 0 it never removes itself
type: PropTypes.oneOf(['info', 'success', 'error']) // the default alert type used when calling this.props.alert.show
transition: PropTypes.oneOf(['fade', 'scale']) // the transition animation
containerStyle: PropTypes.Object // style to be applied in the alerts container
template: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired // the alert template to be used
Here's the defaults:
offset: '10px'
position: 'top center'
timeout: 0
type: 'info'
transition: 'fade',
containerStyle: {
zIndex: 100
}
Those options will be applied to all alerts.
Api
After getting the alert with the useAlert hook, this is what you can do with it:
// show
const alert = alert.show('Some message', {
timeout: 2000, // custom timeout just for this one alert
type: 'success',
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// info
// just an alias to alert.show(msg, { type: 'info' })
const alert = alert.info('Some info', {
timeout: 2000, // custom timeout just for this one alert
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// success
// just an alias to alert.show(msg, { type: 'success' })
const alert = alert.success('Some success', {
timeout: 2000, // custom timeout just for this one alert
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// error
// just an alias to alert.show(msg, { type: 'error' })
const alert = alert.error('Some error', {
timeout: 2000, // custom timeout just for this one alert
onOpen: () => {
console.log('hey')
}, // callback that will be executed after this alert open
onClose: () => {
console.log('closed')
} // callback that will be executed after this alert is removed
})
// remove
// use it to remove an alert programmatically
alert.remove(alert)
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:
import React from 'react'
import { render } from 'react-dom'
import { Provider as AlertProvider } from 'react-alert'
import App from './App'
// 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 AlertTemplate = ({ style, options, message, close }) => (
<div style={style}>
{options.type === 'info' && '!'}
{options.type === 'success' && ':)'}
{options.type === 'error' && ':('}
{message}
<button onClick={close}>X</button>
</div>
)
const Root = () => (
<AlertProvider template={AlertTemplate}>
<App />
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
Easy, right?
Using a component as a message
You can also pass in a component as a message, like this:
alert.show(<div style={{ color: 'blue' }}>Some Message</div>)
Using multiple Providers
You can use different Contexts to show alerts in different style and position:
import React, { createContext } from 'react'
import { render } from 'react-dom'
import { Provider as AlertProvider, useAlert } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
const TopRightAlertContext = createContext()
const App = () => {
const alert = useAlert()
const topRightAlert = useAlert(TopRightAlertContext)
return (
<div>
<button onClick={() => alert.show('Oh look, an alert!')}>
Show Alert
</button>
<button
onClick={() =>
topRightAlert.show('Oh look, an alert in the top right corner!')
}
>
Show Top Right Alert
</button>
</div>
)
}
const Root = () => (
<AlertProvider template={AlertTemplate}>
<AlertProvider
template={AlertTemplate}
position="top right"
context={TopRightAlertContext}
>
<App />
</AlertProvider>
</AlertProvider>
)
render(<Root />, document.getElementById('root'))