React-Toast-Me allows you to show notification toasts in your page easily!

Get started

Install with yarn

$ yarn add react-toast-me

Install with npm

$ npm install --save react-toast-me

Try it yourself

JSX:

import React from 'react';

import ToastProvider, { useToast } from 'react-toast-me';

function MyToasterButton() {
  const { showToast } = useToast();

  return (
    <button
      onClick={() =>
        showToast({
          type: 'success',
          message: 'You are toasted!',
          enableClose: true,
        })
      }
    >
      Click me to be toasted!
    </button>
  );
}

function App() {
  return (
    <ToastProvider 
      expiresIn={7500} 
      horizontalPosition="left" 
      verticalPosition="bottom"
    >
      <MyToasterButton />
    </ToastProvider>
  );
}

TSX:

import React from 'react';

import ToastProvider, { useToast, ToastProps } from 'react-toast-me';

const MyToasterButton: React.FC = () => {
  const { showToast } = useToast();

  const myToast: ToastProps = {
    type: 'success',
    message: 'You are toasted!',
    enableClose: true,
  };

  return (
    <button onClick={() => showToast(myToast)}>
      Click me to be toasted!
    </button>;
  )
};

const App: React.FC = () => {
  return (
    <ToastProvider
      expiresIn={7500}
      horizontalPosition="left"
      verticalPosition="bottom"
    >
      <MyToasterButton />
    </ToastProvider>
  );
};

Docs

ToastProvider

To use react-toast-me you should wrap your component or application with the ToastProvider.

All the ToastProvider props are optional:

| Props | Type | Description | Default | | :------------------- | :-------------------------------- | :---------------------------------------------- | :---------- | | expiresIn (ms) | number | Default life time of all toasts. | 5000 | | horizontalPosition | left | center | right | Horizontal position of toasts. | left | | verticalPosition | top | bottom | Vertical position of toasts. | bottom |

useToast

React Hook responsible for managing all the toasts actions and data.

toasts

List of enabled toasts. All the toasts visible in the page will be within this array.

showToast

Function that fires a new toast in the page.

Returns the new toast id.

Sintax:

showToast(toastProps, id)

| Param | Required | Type | Description | | :----------------- | :------- | :----------- | :------------------------------------------------------------------------- | | toastProps | true | ToastProps | Toast props to the new toast. | | id | false | string | Custom id for the new toast. |

hideToast

Function that remove an existing toast from the page.

Sintax:

hideToast(id)

| Param | Required | Type | Description | | :-------- | :------- | :----------- | :---------------------------------------------------------------------------------- | | id | true | string | Id of the toast to be removed. |

Typings

These types can be imported and used in a Typescript project.

ToastProps

Can be use to type an object to be used in showToast.

| Required | Required | Type | Description | Default | | :----------------- | :------- | :---------- | :-------------------------------------------------------------------------------------- | :--------- | | type | true | success | info | warning | error | Type of toast. | - | | message | true | string | Message to be shown in the toast. | '' | | expiresIn (ms) | false | number | Toast's life time. If it's not define it will assume the ToastProvider life time. | 5000 | | fadeTimeout (ms) | false | number | Toast's fade in and fade out timeout. | 300 | | enableClose | false | boolean | Enable or disable the close button for a toast. | false |

ToastType

Defines the values that can be passed to type property of a toast.

The values are success, info, warning and error.