edlesstoast v1.0.2

EdlessToast 🍞

A customizable toast for react.

This was mostly used as a project for me to learn from and is not heavily maintained.

Install

Installable through:

npm

npm i edlesstoast

yarn

yarn add edlesstoast

Usage

App should be wrapped in a ToastProvider, child components will then have access to the useToast hook. There is a default toast element included.

import { ToastProvider, useToast } from 'edlesstoast';

const SomeComponent = () => {
    const { openToast, closeToast } = useToast();

    const openHandler = () => openToast({ 
        color: '#5cb85c', // Green Color
        text: 'This is a toast!' 
    });

    const closeHandler = () => clostToast();

    return (
        <button onClick={openHandler}>
            Open Toast
        </button>
        <button onClick={clostHandler}>
            Close Toast
        </button>
    );
}

const App = () => {
    <ToastProvider>
        <SomeComponent />
    </ToastProvider>
}

ToastProvider

Props:

useToast

The useToast hook is used like:

const { openToast, closeToast } = useToast();

The openToast method will open a toast, and takes one argument options which are the props that should be passed to your toast element.

The closeToast method will close an open toast.