@boomslag/react-toast

Easily integrate customizable toast notifications into your React project with the @boomslag/react-toast package. This package provides two specialized toast components, ToastError and ToastSuccess, optimized for error and success messages, respectively.

Installation

npm install @boomslag/react-toast

Or if you're using Yarn:

yarn add @boomslag/react-toast

Peer Dependencies:

Ensure you have the following peer dependencies installed:

• react
• react-toastify

npm install react react-toastify

Usage

ToastError

For displaying error notifications:

import { ToastError } from '@boomslag/react-toast';

// In your component or function:
ToastError('This is an error message!');

ToastSuccess

For displaying success notifications:

import { ToastSuccess } from '@boomslag/react-toast';

// In your component or function:
ToastSuccess('This is a success message!');

Customization

The toasts are built on top of react-toastify and have been customized to fit common use-cases. If you need further customization or additional features, consider using react-toastify directly or extend the functionality of this package.

Styling

The ToastError and ToastSuccess components use the following default CSS classes:

• toast-error-message
• toast-success-message

You can target these classes in your styles to further customize the appearance of the toasts.

Default Styling

To include the default styles for the toast messages, import the provided CSS file:

import '@boomslag/react-toast/styles/toastStyles.css';

License

MIT