Toasti-desk NPM

toasti-desk

toasti-desk 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-desk

yarn

yarn add toasti-desk

use

wrap your main component into the ToastContextProvider

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { ToastContextProvider } from 'toasti-desk';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ToastContextProvider>
      <App />
    </ToastContextProvider>
  </React.StrictMode>
);

import React from 'react';
import { ToastiDesk, useToast } from 'toasti-desk';
import '../node_modules/toasti-desk/dist/style.css';

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;

Add dependency

// Add tailwindcss on applications
//tailwindcss.com/

https: configuration;

tsconfig.json;

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/toasti-desk/**/*.{html,js,ts,jsx,tsx}'],
};

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('something 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 });