php-flasher/docs/pages/javascript.md

permalink, redirect_from, title, description

permalink	redirect_from	title	description
/javascript/	/docs/framework/javascript/	JavaScript	Easily add flash notification messages to your JavaScript application with PHPFlasher. Follow our step-by-step guide to install the library using npm or include it in your project using CDN links, and start engaging and informing your users with powerful flash messages.

{% PHPFlasher %} assets can be installed from a cdn or using npm

Installation

Quick start guide for installing the {% PHPFlasher %} from cdn or npm.

---

cdn

To pull in the {% PHPFlasher %} via CDN, grab the latest version from jsdelivr

<script defer src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.2.4/dist/flasher.min.js"></script>

---

npm

To install {% PHPFlasher %} from npm use the following command:

npm i @flasher/flasher

Usage

import flasher from "@flasher/flasher";

window.flasher = flasher; // only if you want to use it globally

flasher.error("Oops! Something went wrong!");
flasher.warning("Are you sure you want to proceed ?");
flasher.success("Data has been saved successfully!");
flasher.info("Welcome back");

or if you are using a cdn like this:

<script defer src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.2.4/dist/flasher.min.js"></script>
<script>
    flasher.error("Oops! Something went wrong!");
    flasher.warning("Are you sure you want to proceed ?");
    flasher.success("Data has been saved successfully!");
    flasher.info("Welcome back");
</script>

---

Other adapters

First grad the cdn for any js library adapter supported by {% PHPFlasher %} or install it with npm and then call the create() method on flasher object :

<script defer src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.2.4/dist/flasher.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@flasher/flasher-toastr@1.2.4/dist/flasher-toastr.min.js"></script>
<script>
    const factory = flasher.use('toastr');
    factory.error("Oops! Something went wrong!");
    factory.warning("Are you sure you want to proceed ?");
    factory.success("Data has been saved successfully!");
    factory.info("Welcome back");
    
    // or simply with
    flasher.toastr.error("Oops! Something went wrong!");
    flasher.toastr.warning("Are you sure you want to proceed ?");
    flasher.toastr.success("Data has been saved successfully!");
    flasher.toastr.info("Welcome back");
</script>