@chcodes-hamza/notifications-toast

Toast notification library & Custom element

This is a library which a class or a custom web component to display toast notifications in the positions that you configure.

Usage

With npm

Install the package using npm or yarn

npm i  @chcodes-hamza/notifications-toast
# or
yarn add  @chcodes-hamza/notifications-toast

Then import it in your script

import "./node_modules/@chcodes-hamza/notifications-toast/dist/Toast.js"

With unpkg.com

<script type="module" src="https://unpkg.com/@chcodes-hamza/notifications-toast"></script>

Then use the custom element in your html <toast-notifications> </toast-notifications>.

<toast-notifications options='{
      "text": "Custom element",
      "position": "top-right",
      "pauseOnHover": true,
      "pauseOnFocusLoss": true,
      "autoClose": 5000,
      "type":"sucess"
    }'></toast-notifications>

Customization

Attributes

Attribute	Type	Description
options	JSON	a JSON object that contains many properties

Options Object:

Option	Default	Description
text	empty	the text displayed in the toast
position	top-right	the postion where the toast will be displayed (top-right, top-left, top-center ,bottom-center, bottom-left , bottom-right)
pauseOnHover	true	the toast progress bar stops when it s hovred
pauseOnFocusLoss	true	the toast progress bar stops when you leave the current window
autoClose	5000 ms	the toast will be closed automaticly after the 5000ms if you wnat to make it disappear manually put it false
type	default template	customize the type of the toast (danger, info , success, warning)
showProgress	true	enable the progress bar in the toast bottom
canClose	true	give ability to close the toast
onClose	()=>{}	customize the action after the toast is closed, callback as input

CSS Custom Properties

Property
--text-color-default
--chcodes-notif-default
--chcodes-notif-default-progress
--chcodes-notif-info
--chcodes-notif-info-progress
--chcodes-notif-danger
--chcodes-notif-danger-progress
--chcodes-notif-warning
--chcodes-notif-warning-progress
--chcodes-notif-sucess
--chcodes-notif-sucess-progress