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
- 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">×</span>
</button>
</div>
<div class="toast-body">
I am toast body, hello
</div>
</div>
- You can import method, that just create the same
import {createToastElement} from "nikita-toast-component";
const {toast, closeFunction} = createToastElement('body', 'title',
{
status: 'info'
}
);
- 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"
|