Toastive

👀 Overview

Toastive is a lightweight, highly customizable, and easy-to-use native web component library for creating toast notifications.

Some of the key features include:

• 🪶 Lightweight: The minified version is less than 5KB.
• 🎨 Customizable: Easily customize the appearance of the toasts. More than 30 css variables to styling a toast that you will love.
• 🚀 Easy to use: Just one showToastive() method is enought!.
• 📦 Zero dependencies: No dependencies required.
• 🌐 Cross-browser: Works in all modern or older browser that suporrt web components.
• 📱 Responsive: Works on all devices.
• 🌈 Themes: Comes with variants out of the box.

📦 Installation

NPM

npm install toastive

Yarn

yarn add toastive

🚀 Usage

Toastive element is, at the end of the day, a web component. So, you can use it like any other web component. However, we also provide a simple API to make it easier to use.

Import the module

import { showToastive } from 'toastive'

showToastive()

The showToastive() method is the simplest way to show a toast notification. It accepts an object with the following properties:

Property	Description	Type	Default
autoClose	Auto close the toast after a specified time (in milliseconds).	boolean	true
closeButton	Show a close button in the toast.	boolean	false
duration	The duration of the toast in milliseconds (only if `autoClose` is set to `true`).	number	5000
message	The message to display in the toast.	string	''
title	The title of the toast.	string	''
position	The position of the toast.	ToastivePosition	'bottom-right'
variant	The variant of the toast.	ToastiveVariant	'default'

Types

Toastive library is fully developed with TypeScript. So, you can use the types in your project.

import { ToastivePosition, ToastiveProps, ToastiveVariant } from 'toastive'

Example

import { showToastive, ToastiveProps, ToastivePosition, ToastiveVariant } from 'toastive'

showToastive({
	title: 'Toastive',
	message: '👋 Hi from top-right corner!',
	position: ToastivePosition.TopRight,
	variant: ToastiveVariant.Success,
	autoClose: true,
	duration: 5000,
	closeButton: false
})

Code above will show a toast notification with a success variant, a title, and a message. The toast will be displayed in the top-right corner of the screen and will automatically close after 5 seconds.

Closing a toastive

Toasts are widely used in applications to show notifications to users. However, these notifications should not be blocking the user, so in terms of UX, it is advisable to use the default autoClose property.

However, sometimes you may want to allow the user to close the toast manually. You can do this by setting the closeButton property to true.

showToastive({
	title: 'Toastive',
	message: '👋 Hi from top-right corner!',
	position: ToastivePosition.TopRight,
	variant: ToastiveVariant.Success,
	autoClose: false,
	closeButton: true
})

Additionally, you can close a toastive manually by calling the close() method.

const toast = showToastive({
	title: 'Toastive',
	message: '👋 Hi from top-right corner!',
	position: ToastivePosition.TopRight,
	variant: ToastiveVariant.Success,
	autoClose: false,
	closeButton: true
})

// Do something...
toast.close()

All toast can be closed by dragging them to the right or left side of the screen, depending on the position of the toast. These gestures are enabled by default and it's fully compatible with touch devices.

Updating a toastive

You can update a toastive by calling the update() method. This method accepst same properties as showToastive() method.

const toast = showToastive({
	title: 'Toastive',
	message: '👋 Hi from top-right corner!',
	position: ToastivePosition.TopRight,
	variant: ToastiveVariant.Loading,
	autoClose: false,
	closeButton: true
})

// Do something...
toast.update({
	title: 'Updated title',
	message: 'Updated message',
	variant: ToastiveVariant.Warning,
	autoClose: true
})

💅 Styling

Toastive is fully customizable. You can easily customize the appearance of the toasts by using next CSS variables.

Wrapper

Property	Description	Default
--toastive-wrapper-horizontal-offset	The horizontal offset of the toast wrapper.	1rem
--toastive-wrapper-vertical-offset	The vertical offset of the toast wrapper.	1rem
--toastive-wrapper-gap	The gap between toasts.	1rem

Font

Property	Description	Default
--toastive-font-family	The font family of the toast.	inherit
--toastive-font-size	The font size of the toast.	0.8rem

Colors

Property	Description	Default
--toastive-content-color	The color of the toast content.	#333
--toastive-background-color	The background color of the toast.	#fff

Border

Property	Description	Default
--toastive-border-radius	The border radius of the toast.	0.25rem
--toastive-border-width	The border width of the toast.	1px
--toastive-border-color	The border color of the toast.	#ededed

Shadow

Property	Description	Default
--toastive-box-shadow	The box shadow of the toast.	0 4px 12px rgba(0, 0, 0, 0.1)

Layout

Property	Description	Default
--toastive-padding-horizontal	The horizontal padding of the toast.	1rem
--toastive-padding-vertical	The vertical padding of the toast.	0.5rem
--toastive-width	The width of the toast.	350px

Close button

Property	Description	Default
--toastive-close-button-color	The color of the close button.	currentColor
--toastive-close-button-size	The size of the close button.	1rem

Progress bar

Property	Description	Default
--toastive-progress-height	The height of the progress bar.	0.25rem
--toastive-progress-color	The color of the progress bar.	currentColor
--toastive-progress-opacity	The opacity of the progress bar.	0.5

Variants

Property	Description	Default
--toastive-info-content-color	The color of the toast content for the info variant.	#0973dc
--toastive-info-background-color	The background color of the toast for the info variant.	#f0f8ff
--toastive-info-border-color	The border color of the toast for the info variant.	#b0e2ff
--toastive-error-content-color	The color of the toast content for the error variant.	#e60000
--toastive-error-background-color	The background color of the toast for the error variant.	#fff0f0
--toastive-error-border-color	The border color of the toast for the error variant.	#ffe0e1
--toastive-warning-content-color	The color of the toast content for the warning variant.	#dc7609
--toastive-warning-background-color	The background color of the toast for the warning variant.	#fffcf0
--toastive-warning-border-color	The border color of the toast for the warning variant.	#fdf5d3
--toastive-success-content-color	The color of the toast content for the success variant.	#008a2e
--toastive-success-background-color	The background color of the toast for the success variant.	#ecfdf3
--toastive-success-border-color	The border color of the toast for the success variant.	#d3fde5

Example

:root {
	--toastive-wrapper-horizontal-offset: 2rem;
	--toastive-wrapper-vertical-offset: 2rem;
	--toastive-wrapper-gap: 0.5rem;

	--toastive-font-family: 'Arial', sans-serif;
	--toastive-font-size: 1.2rem;

	--toastive-content-color: #ccc;
	--toastive-background-color: #333;
}