toasti-toast

toasti

toasti is a library for non-blocking notifications . The goal is to create a simple core library that can be customized and extended.

Install

npm

npm install --save toasti-toast

yarn

yarn add toasti-toast

import ToastiToast from 'toasti-toast';

use

import React from 'react';
import { ToastiToast, useToast } from './component/ToastiToast';

const App: React.FC = () => {
  const toast = useToast();

  const handelClick = () => {
    toast.error('Success toast notification', { position: 'bottom-left' });
  };
  return (
    <>
      <button onClick={handelClick} className='px-3 py-1 border rounded-md shadow-md'>
        Success{' '}
      </button>
      <ToastiToast />
    </>
  );
};

export default App;

Quick Start

// Display a warning toast, with no title
toasti.warning('confirm you want to delete message');

// Display a success toast, with a title
toasti.success('login successfull');

// Display an error toast, with a title
toasti.error('somethis wrong');

// Override global options
toasti.info('refresh the page');

Delay

The delay value determines how long this notification appears on screen before it disappears. The default value is 0 seconds (5000ms). You can alter this to any number you wish.

toasti.success('We do have the Kapua suite available.', { timer: 5000 });

Position

By default, the position is set to bottom-right. However you can alter this to one of the following if you wish: top-left, top-right, bottom-left, bottom-right, center,top-center, bottom-center, left-center, right-center.

toasti.success('We do have the Kapua suite available.', { position: 'bottom-left' });
toasti.success('We do have the Kapua suite available.', { position: 'bottom-left', timer: 5000 });