Package Exports

react-alert

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-alert) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-alert

2kb alerts for React

Demo

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:

Basic
Dark

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 { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import App from './App'

// optional cofiguration
const options = {
  // you can also just use 'bottom center'
  position: positions.BOTTOM_CENTER,
  timeout: 5000,
  offset: '30px',
  // you can also just use 'scale'
  transition: transitions.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',
  'middle left',
  'middle',
  'middle right',
  '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 { useAlert, positions, Provider as AlertProvider } 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={positions.TOP_RIGHT}
      context={TopRightAlertContext}
    >
      <App />
    </AlertProvider>
  </AlertProvider>
)

render(<Root />, document.getElementById('root'))