🔥 WhiskrJS Snackbar Library Demo 🔥

Get Started

Integrate WhiskrJS into your project with ease.

Install via NPM ▼

Install WhiskrJS via NPM:

npm install whiskrjs

Include via CDN ▼

Include the following script in your HTML:

<script src="https://unpkg.com/whiskrjs/dist/whiskr.umd.js"></script>

Basic Usage ▼

Display a simple notification:

Whiskr.show({
    message: 'Hello World!',
    type: 'success',
});

Custom Whiskr

🔧 WhiskrJS Customization Options 🔧

⚙️ Global Settings ▼

🔢 Max Whiskrs per Position:

🔄 Enable Queueing:

🛠️ Basic Settings ▼

📢 Message:

📝 Custom HTML Content:

🎨 Type:

⏰ Duration (ms):

📍 Position:

❎ Close Button Settings ▼

❎ Close Button Position:

🎨 Close Button Color:

✏️ Close Button Content:

📝 Text Settings ▼

📝 Text Alignment:

📝 Text Overflow Behavior:

Wrap Text Scroll Overflow Ellipsis Overflow

🔗 Action Buttons ▼

🔗 Include Action Buttons

🔧 Action Button 1

✏️ Action Text:

🔠 Text Size (px/rem):

🔤 Text Color:

🎨 Button Background Color:

🟢 Hover Color:

🔴 Active Color:

📏 Border Color:

📐 Border Thickness:

🔧 Action Button 2

✏️ Action Text:

🔠 Text Size (px/rem):

🔤 Text Color:

🎨 Button Background Color:

🟢 Hover Color:

🔴 Active Color:

📏 Border Color:

📐 Border Thickness:

🎨 Styles Settings ▼

🎨 Custom Styles:

🔵 Background Color:

🔤 Text Color:

🔠 Font Size (px/rem):

🖌️ Border Customization ▼

🖌️ Border Customization:

🎨 Border Color:

📐 Border Sides (comma separated):

🔝 Top Border Thickness:

➡️ Right Border Thickness:

🔻 Bottom Border Thickness:

⬅️ Left Border Thickness:

🎞️ Animation Settings ▼

🎞️ Animation Type:

⏱️ Animation Duration (ms):

⏸️ Pause on Hover

📏 Width Customization ▼

📏 Width Customization:

Auto Width (Uses content width) Full Width Custom Width

🔥 WhiskrJS Demo 🔥

Get Started

Pre-made Demos

Custom Whiskr

🔧 WhiskrJS Customization Options 🔧

🔧 Action Button 1

🔧 Action Button 2

Contribute on GitHub