Bridge toaster
An elegant and simple notification for javascript, with no dependencies
Features
- Simple CSS-animated customizable toast pop-ups for any design
- No dependencies and
< 1kb
code - Toasts appear and disappear by specifying optional timeout
Installation & Usage
bridge-toaster is primarily ES6 module. See it in action:
npm i bridge-toaster
import bridgeToaster from "bridge-toaster"
bridgeToaster('success', 'Hello Toaster!')
Parameters:
bridgeToaster(
'error', // Toaster style type. Pre-defined: error, warning or success
'message', // Message
false // Timeout in ms (default: 5000)
)
Parameters:
#bridge-toaster .toast {
z-index: 9999;
padding: 20px;
width: 100%;
max-width: 300px;
position: fixed;
bottom: 0px;
left: 10px;
color: white;
transition: 0.3s;
transform: translateY(0);
opacity: 0;
font-size: 12px;
background: rgba(35, 37, 43, 0.9);
}
#bridge-toaster .toast.error {
background: rgba(139, 0, 0, 0.9);
}
#bridge-toaster .toast.warning {
background: rgba(255, 140, 0, 0.9);
}
#bridge-toaster .toast.success {
background: rgba(60, 188, 75, 0.9);
}
#bridge-toaster .toast.active {
opacity: 1;
bottom: 10px;
}
@media (max-width: 568px) {
#bridge-toaster .toast {
max-width: none;
width: calc(100% - 40px);
margin: auto;
left: 0;
right: 0;
}
}
Import the style
@import ~bridge-toaster/src/bridge-toaster // or '~bridge-toaster/dist/bridge-toaster.min.css'