Quick-Toaster

A quick and easy wrapper around react-bootstrap toasters, you can toast from anywhere in your application with a few simple steps.

Quick

Installation

1npm install @scrumble-nl/react-quick-toaster

or

1yarn add @scrumble-nl/react-quick-toaster

Usage

Provider

Add the provider as top level as possible:

1import React from 'react';
2import App from './src/app';
3import {ToastProvider} from '@scrumble-nl/quick-toaster'; // Don't forget to import this
4import 'bootstrap/dist/css/bootstrap.min.css';
5import '@scrumble-nl/react-quick-toaster/lib/scss/toaster.css'; // Don't forget to import this
6
7export const ToastApp = () => (
8    <ToastProvider>
9        <App />
10    </ToastProvider>
11);

The ToastProvider has multiple optional props so you can customize it to your needs:

Name	Type	Required	Description	Default
position	'top-left', 'top-right', 'bottom-left', 'bottom-right'	false	The position of the toast container	top-right
maxItems	number	false	The maximum amount of toasts rendered at a given time	8
defaultTimer	number	false	The default amount of ms before the toast is removed	4000

Adding toasts hooks

1. Import useToaster in the component where you want to create a toast
2. Finally, you can create a toast with the desired configuration from your component:

1import React from 'react';
2import {useToaster} from '@scrumble-nl/quick-toaster'; // Step 1
3
4export const MyComponent = () => {
5    const toast = useToaster();
6
7    const handleClick = () => {
8        toast({
9            content: 'Damn, this is an easy package!',
10            variant: 'danger',
11        });
12    };
13
14    return (
15        <button onClick={handleClick}>Show my awesome toast</button>            
16    )
17}

Adding toasts class components (Legacy)

1. Import withToaster in the component where you want to create a toast
2. If you are using TypeScript, import ToasterProps and use for props typing
3. Add export default withToaster(MyComponent) to the file
4. Finally, you can create a toast with the desired configuration from your component:

1import React from 'react';
2import {withToaster, ToasterProps} from '@scrumble-nl/quick-toaster'; // Step 1 (& 2)
3
4class MyComponent extends React.Component<ToasterProps, {}> {
5
6    showToast = (): void => {
7        this.props.toaster.add({content: 'Damn, this is an easy package!'}); // Step 4
8    }
9
10    render = (): JSX.Element => {
11        return (
12            <button onClick={this.showToast}>Show my awesome toast</button>            
13        )
14    }
15}
16
17export default withToaster(MyComponent); // Step 3

The following options can be used for customization:

Name	Type	Required	Description	Default
content	string	true	The content for the toast	undefined
header	string	false	The header for the toast	''
variant	'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'	false	The toast type	success
dismissTimer	number	false	Auto dismiss amount in milliseconds	dismissTimer of ToastProvider
dismissible	boolean	false	If you can dismiss the toast	true

Next to that you can override the bootstrap class .alert to change the look of the toasts.

Roadmap

• Packagize component
• Improve styling customizability
• Automated testing implementation
• Switch from interfaces to types
• Improve scss usage

Contributing

If you would like to see additions/changes to this package you are always welcome to add some code or improve it.

Scrumble

This product has been originally developed by Scrumble for internal use. As we have been using lots of open source packages we wanted to give back to the community. We hope this helps you getting forward as much as other people helped us!