Laravel 7: Functions in Blade Components

#laravel #php #webdev

With Laravel 7 Blade Components, you can invoke public functions in view file of Component. Let's look into good old Alert component example.

class Alert extends Component
{
    public string $type;

    public string $message;

    public function __construct(string $type, string $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

Now, let's add a function/method customFunction in our class as:

class Alert extends Component
{
    public string $type;

    public string $message;

    public function __construct(string $type, string $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    public function customFunction(): string
    {
        return "string from a custom function component";
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

Invoking the function

Now let's say we want to use this method inside the alert.blade.php. It's as easy as using a public property in component's view file.

<div>
    <div class="alert alert-{{$type}}">
        <h3>{{$message}}</h3>
        <span>{{ $customFunction }}</span>
    </div>
</div>

Passing parameters

What if we needed to pass some parameters? Easy 🙈

<div>
    <div class="alert alert-{{$type}}">
        <h3>{{$message}}</h3>
        <span>{{ $customFunction('custom param') }}</span>
    </div>
</div>

and in our class file:

class Alert extends Component
{
    public string $type;

    public string $message;

    public function __construct(string $type, string $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    public function customFunction(string $param): string
    {
        return "string from a custom function component and a " . $param;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

Let me know in comments how you can use this feature 👇🏼

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.