React-toast-me NPM

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`