Create Custom Blade Directives in Laravel

koossaayy

Koussay

Posted on August 27, 2023

Create Custom Blade Directives in Laravel

Laravel Blade is awesome, really awesome. One of the greatest things about it, is the ability to add custom directives.
One use case I recently stumbled upon, is formatting money, with the currency. For sure I can create a helper function and call it.
Example

    if (! function_exists('formatMoney')) {
    function formatMoney(string|int|float $amount) {
        if (is_string($amount)) {
            $amount = floatval($amount);
        }

        $settings = app(GeneralSettings::class);

        $formatter = new NumberFormatter(config('app.currency_locale', 'en_US'), NumberFormatter::CURRENCY);

        return $formatter->formatCurrency($amount, $settings->app_currency);

    }

Enter fullscreen mode Exit fullscreen mode

And then we could use it in our views like the following

...
{{ formatMoney($invoice->total) }}
...
Enter fullscreen mode Exit fullscreen mode

And we're good to go, but in this context, let's use the power of Blade and create our own directive.
In order to do so, open AppServiceProvider.php and head to the boot method.
Inside the boot method, we will write our own custom directive.

Blade::directive($name, function ($expression) {
    some code here;
});
Enter fullscreen mode Exit fullscreen mode

In our context we will use the code above, defined in a helper class, so we can format the money.
The blade directive will be named money

Blade::directive('money', function ($expression) {
    return "<?php echo app('App\Utils\Helpers')->formatMoney($expression); ?>";
});
Enter fullscreen mode Exit fullscreen mode

So here is the final code, and in the view file, we can call it as follows

@money('somevalue')
Enter fullscreen mode Exit fullscreen mode

The take here is in the return value, if you want to have some formatters, or some conditions, the return must be a PHP code. Let's take another example.
Laravel has @auth & @guest directives.
But let's make some thing on our own. Let's say we have customers in our application, so we will make a blade directive that checks if the authenticated user is a customer or not, and show some code based on that condition.
Usually, here is what we would do :

@if(auth()->user()->isCustomer)
//some code here
@endif
Enter fullscreen mode Exit fullscreen mode

But, that would be hard if we have that piece of code everywhere in our views. Imagine if we will add another condition, like checks if the customer has an active subscription for example.
So yeah, you've got the point.
In this situation, we could leverage blade custom directives.
The use of the new directive would be as follows :

@customer
//somecode here
@endcustomer
Enter fullscreen mode Exit fullscreen mode

As you can see here, we have two directives, so we will define two functions in our AppServiceProvider.php

Blade::directive('customer', function ($expression) {
    return "<?php if(auth()->check() && auth()->user()->isCustomer): ?>";
});

Blade::directive('endcustomer', function ($expression) {
    return "<?php endif; ?>";
});

Enter fullscreen mode Exit fullscreen mode

The first one is to test the condition and open the colon for your code logic, and the other one, will close the the if statement.

In this short tutorial, we saw how we could write custom blade directives. I hope it was insightful for you to understand how to create and use them.
If there is any question or any suggestion, feel free to reach me on Twitter

Original Post

💖 💪 🙅 🚩
koossaayy
Koussay

Posted on August 27, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related