If you find PHPFlasher useful, we would greatly appreciate your support in the form of a star rating ⭐ on GitHub or by sharing the project on Twitter click here. Your feedback helps us keep the package up-to-date and well-maintained. Thank you

PHPFlasher allows you to specify a custom theme for your notifications, and apply your own html/css markup to it to fit your app design.

The preferred way to do this is to add your theme to PHPFlasher with JavaScript code this way you can use the same theme to display notifications from both JavaScript and PHP.

Using JavaScript

First you need to require flasher main script, and then use the addTheme() method to add your theme.

The usage is very simple :

<script defer src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.2.4/dist/flasher.min.js"></script>
<script>
    flasher.addTheme('bootstrap', {
        styles: 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css', // optional
        render(envelope) {
            const notification = envelope.notification;
            const map = {
                success: 'alert-success',
                info: 'alert-info',
                warning: 'alert-warning',
                error: 'alert-danger',
            };

            return `
                <div class="alert ${map[notification.type]}">
                  ${notification.message}
                </div>
            `;
        },
    })
</script>

The reason why we are registering custom themes with JavaScript is because we want to be able to use the same theme for both the backend and the frontend.

The next step is straightforward, send your notification with theme.boostrap like the following:

class BookController
{
    public function save(FlasherInterface $flasher)
    {
        // ...

        $flasher->using('theme.bootstrap')->addSuccess('Book saved successfully');

Or maybe use it as the default adapter for your application:

For Laravel:

// config/flasher.php
return [
    'default' => 'theme.bootstrap',
];

For Symfony:

# config/packages/flasher.yaml
flasher:
    default: theme.bootstrap

Using PHP

For backend developers this is maybe a simple and fast approche, because we only need to create a Blade or Twig view with our custom theme and it’s done.

But it has some drawbacks:

1. You cannot use the same theme if you want to display notifications from JavaScript.
2. Response size will be bigger especially for ajax requests.

I suggest you to use the above JavaScript approche instead.

But if you still want to use render a Blade or Twig view to add your own custom theme, check laravel or symfony to see how to do it.