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:

1import React from 'react';
2
3import ToastProvider, { useToast } from 'react-toast-me';
4
5function MyToasterButton() {
6  const { showToast } = useToast();
7
8  return (
9    <button
10      onClick={() =>
11        showToast({
12          type: 'success',
13          message: 'You are toasted!',
14          enableClose: true,
15        })
16      }
17    >
18      Click me to be toasted!
19    </button>
20  );
21}
22
23function App() {
24  return (
25    <ToastProvider 
26      expiresIn={7500} 
27      horizontalPosition="left" 
28      verticalPosition="bottom"
29    >
30      <MyToasterButton />
31    </ToastProvider>
32  );
33}

TSX:

1import React from 'react';
2
3import ToastProvider, { useToast, ToastProps } from 'react-toast-me';
4
5const MyToasterButton: React.FC = () => {
6  const { showToast } = useToast();
7
8  const myToast: ToastProps = {
9    type: 'success',
10    message: 'You are toasted!',
11    enableClose: true,
12  };
13
14  return (
15    <button onClick={() => showToast(myToast)}>
16      Click me to be toasted!
17    </button>;
18  )
19};
20
21const App: React.FC = () => {
22  return (
23    <ToastProvider
24      expiresIn={7500}
25      horizontalPosition="left"
26      verticalPosition="bottom"
27    >
28      <MyToasterButton />
29    </ToastProvider>
30  );
31};

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.