nikita-toast-component

1.4.2 • Public • Published

toast-component

framework agnostic toast notification component

installation

npm i nikita-toast-component

guide

  • first, you need import css
import "nikita-toast-component/src/styles/index.css";

After that you have options how to work with toast

  1. You can just create toast by using classes
<div class="toast toast-info">
    <div class="toast__toast-header">
        <strong class="toast-header__title">Title</strong>
        <small class="toast-header__time-text">just now</small>
        <button type="button" class="toast-header__close-button">
            <span aria-hidden="true" class="close-button__close-icon">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        I am toast body, hello
    </div>
</div>
  1. You can import method, that just create the same
import {createToastElement} from "nikita-toast-component";
const {toast, closeFunction} = createToastElement('body', 'title',
    {
        status: 'info'
    }
);
  1. Or import method, that will create toast container, insert toast there and insert it into rootElement
import {generateManagerWithContent, generateManager} from "nikita-toast-component";

const toastManger = generateManagerWithContent("Hello, i am body", {
    title: 'i am title',
    status: 'info',
    position: 'bottom-left',
    rootElement: YourElement
});
const toastManger = generateManager({
    status: 'info',
    position: 'bottom-left',
    rootElement: YourElement
});

toastManger.createNew('Hello, i am body', 'i am title');

createToastElement

const {toast, closeFunction} = createToastElement(body, title, options)
option value
status "" - default option, "warning", "error", "success", "info"
id your id
closeToast function that will be called, when you or user close your toast
closeOnClick false - default, true - enable close not just clicking directly on close button but also toast itself

Example :

const {toast, closeFunction} = createToastElement(body, title, {
    status: 'info',
    id: 'my special id',
    closeToast: () => alert('i am closed')
});

setTimeout(() => {
    closeFunction()
}, 4000); // close your toast after 4 second

generateManager

const toastManger = generateManager({ // options
    status: 'info',
    position: 'bottom-left',
    rootElement: YourElement,
    autoCloseDuration: 4000,
    doNotGenerateContainer: true,
    closeOnClick: true
});

options:

option value
status "" - default option, "warning", "error", "success", "info"
autoCloseDuration 0 - default, time in milliseconds till toast will be closed automatically
closeOnClick false - default, true - enable close not just clicking directly on close button but also toast itself
rootElement body - default, your element, where toasts will be appended
doNotGenerateContainer false - default, true - toastManager will not create toast container and will append toast directly in rootElement
position "top-rigth" - default, "top-left", "bottom-left", "bottom-right"

example page

Install

npm i nikita-toast-component

DownloadsWeekly Downloads

1

Version

1.4.2

License

MIT

Unpacked Size

12.9 kB

Total Files

13

Last publish

Collaborators

  • nikita-nikita-nikita