@scrumble-nl/quick-toaster v0.1.6

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

npm install @scrumble-nl/quick-toaster

or

yarn add @scrumble-nl/quick-toaster

Usage

Provider

Add the provider as top level as possible:

import React from 'react';
import App from './src/app';
import {ToastProvider} from '@scrumble-nl/quick-toaster'; // Don't forget to import this

export default class ToastApp extends React.Component<{}, {}> {
    render = (): JSX.Element => {
        return (
            <ToastProvider>
                <App/>
            </ToastProvider>
        )       
    }       
}

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

Adding toasts

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

import React from 'react';
import {withToaster, IToast} from '@scrumble-nl/quick-toaster'; // Step 1 (& 2)

interface props {
    toaster: {
        add(toast: IToast): void, // Step 2
    },
}

class MyComponent extends React.Component<props, {}> {

    showToast = (): void => {
        this.props.toaster.add({content: 'Damn, this is an easy package!'}); // Step 4
    }

    render = (): JSX.Element => {
        return (
            <button onClick={this.showToast}>Show my awesome toast</button>            
        )
    }
}

export default withToaster(MyComponent); // Step 3

The following options can be used for customization:

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!