using duct-alert

With alert-duct, you can show notifications to users in an animated manner.

Demo

https://codeduct.com/duct-alert

duct-alert setup

npm

npm i duct-alert

Add the duct-alert package in the component you want to use after installation.

import alertDuct from 'duct-alert'

ready to use

alertDuct({
    animateInClass : 'animate__backInDown',
    animateOutClass : 'animate__backOutDown',
    type: 'info',
    head : 'Completed Successfully',
    message : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim doloremque repellat, vitae at fugit numquam fugiat veniam a minus! Provident fugiat, optio dignissimos officia voluptatem ea. Unde nemo in eum!',
    button : {
        closeText : 'Close'
    },
    clickOutSide : false
})

You can send your notifications within the alertDuct function.

Parameters

| Name | Value | Default Value | | ----------------- | ------------------------------------------------------------------ | ---- | | type | Specifies the type of notifications. danger, warning, success, info | info | animateInClass | The opening animation of the popup. For different animation types, you can check out Animate.css. | animate__bounceIn | | animateOutClass | Closing animation of the popup window. You can check out Animate.css for different types of animations. | animate__bounceOut | |head | Represents the title in the alert box | empty | |message | Represents the Descriptive text in the alert box | required | |closeText | text on close button | Close | |clickOutSide | Allows the popup window to be closed if clicked outside the popup window | true |