Auto dismissing alert

This is part on my mini series("How to AlpineJS") on how to build reusable component that can be used in any web framework.

Auto dismissing alert

	@props(['message' => 'THis is a demo msg', 'type' => 'danger', 'duration' => 5000, 'position' => 'bottom-center', 'autoDismiss' => true])
	<div x-data="alert('{{ $message }}', '{{ $type }}', '{{ $duration }}', '{{ $position }}', '{{ $autoDismiss }}')" x-on:click="dismissAlert" x-id="['alert']"
	:class="{
	'text-light-area-color dark:text-light-area-color-dark bg-dark-area-color dark:bg-dark-area-color-dark': type ===
	'basic',
	'text-white bg-red-500': type ===
	'danger',
	'text-white bg-green-500': type ===
	'success',
	'text-white bg-blue-500': type ===
	'info',
	'text-white bg-yellow-500': type ===
	'warning',
	'top-5 md:top-10 mx-auto left-5 md:left-10': position ===
	'top-left',
	'top-5 md:top-10 mx-auto left-[50%] translate-x-[-50%]': position ===
	'top-center',
	'top-5 md:top-10 mx-auto right-5 md:right-10': position ===
	'top-right',
	'bottom-5 md:bottom-10 mx-auto left-[50%] translate-x-[-50%]': position ===
	'center',
	'bottom-5 md:bottom-10 mx-auto left-5 md:left-10': position ===
	'bottom-left',
	'bottom-5 md:bottom-10 mx-auto left-[50%] translate-x-[-50%]': position ===
	'bottom-center',
	'bottom-5 md:bottom-10 mx-auto right-5 md:right-10': position ===
	'bottom-right',
	'mt-5 px-5 py-3 max-w-[80%] cursor-pointer flex justify-between items-center leading-normal fixed rounded-lg': true,
	}"
	role="alert">
	<p x-text="message"></p>
	@svg('heroicon-s-x', 'ml-10')
	</div>

view raw alert.blade.php hosted with ❤ by GitHub

	/**
	* Alpine is a lightweight JS framework that will handle all element states
	*/
	import Alpine from "alpinejs";
	// import the Alpine data for the alert component
	import { alert } from './components'
	// optional but useful
	window.Alpine = Alpine;
	//register any plugins here
	// add all global Alpine.data methods here
	Alpine.data('alert', alert);
	Alpine.start();

view raw app.js hosted with ❤ by GitHub

	export let alert = (message = 'Success', type = 'default', duration = 5000, position = 'bottom-center', autoDismiss = true) => ({
	init() {
	this.message = message;
	this.type = type;
	this.duration = duration;
	this.position = position;
	autoDismiss && this.autoDismissAlert();
	},
	message: 'Success',
	type: 'default',
	duration: 5000,
	position: 'bottom-center',
	dismissAlert() {
	this.$root.remove();
	},
	autoDismissAlert() {
	setTimeout(function (el) {
	console.log('auto dismiss me please', el);
	el && el.remove();
	}, this.duration, this.$root);
	},
	})

view raw components.js hosted with ❤ by GitHub

	{{-- default alert. message: string(default: 'Success') --}}
	<x-alert :message="{{ 'Successful' }}" />
	{{-- type: string(default: 'basic') = 'basic' | 'danger' | 'success' | 'info' | 'warning' --}}
	<x-alert :message="{{ 'Error' }}" :type="{{ 'danger' }}" />
	{{-- duration: number(default: 5000) in milliseconds --}}
	<x-alert :message="{{ 'Successful' }}" :duration="{{ 5000 }}" />
	{{-- position: string(default: 'bottom-center') = 'top-left' | 'top-center' | 'top-right' | 'center' | 'bottom-left' | 'bottom-center' | 'bottom-right'
	--}}
	<x-alert :message="{{ 'Successful' }}" :position="{{ 'bottom-center' }}" />
	{{-- auto-dismiss: boolean(default:true) --}}
	<x-alert :message="{{ 'Successful' }}" :auto-dismiss="{{ true }}" />
	{{-- all props --}}
	<x-alert :message="{{ 'Successful' }}" :type="{{ 'warning' }}" :duration="{{ 5000 }}" :position="{{ 'bottom-center' }}" :auto-dismiss="{{ true }}" />

view raw usage.alert.blade.php hosted with ❤ by GitHub

[!Tip]
Any arguments you pass after the duration for setTimeout will be passed to the callback function. In the code snippet above, we passed $this.root magic property so that we can auto dismiss it after 5000ms(5 seconds)

Next: Multipurpose TextField