react-spring alerts

The easiest way to add beautiful alerts to your React app. Built with Hooks and Context API, animated with react-spring.

Demo

Quickstart

1. npm i react-spring-alerts / yarn add react-spring-alerts
2. Wrap your root component with the AlertsWrapper component:

import { AlertsWrapper } from 'react-spring-alerts';
import { App } from './App';

const AppWithAlerts = () => (
    <AlertsWrapper>
        <App />
    </AlertsWrapper>
);

3. Access the Alerts context from any component within your app

import { useAlerts } from 'react-spring-alerts';

const AlertButton = () => {
    const Alerts = useAlerts();
    ...
};

4. Trigger an alert

Alerts.showAlert({
    type: 'error',
    title: 'Example Error',
    message: 'This is an error message',
    duration: 5000,
});

AlertWrapper Configuration

You can override the style of the alerts by passing an optional styleConfig prop to AlertWrapper:

const styleConfigPropType = PropTypes.shape({
    container: PropTypes.object,
    header: PropTypes.object,
    body: PropTypes.object,
    error: PropTypes.object,
    info: PropTypes.object,
    success: PropTypes.object,
});

You can also customise the transition animation by passing an optional transitionConfig prop to AlertWrapper. For more information, please see documentation for react-spring's useTransition.

Alert Configuration

| Property | Type | Required | Default value | Description | | -- | -- | :--: | :--: | -- | | title | string | ✅ | - | Header for the alert | | message | string | ✅ | - | Message content for the alert | | type | string | ❌ | 'error' | Type of the alert. One of 'success', 'info' or 'error' | | duration | number | ❌ | 8000 | Duration of the alert in ms. 0 disables auto-dismiss |