DEV Community

Cover image for Filament Render Hooks: example with authentication pages
yebor974 for Filament Mastery

Posted on • Originally published at filamentmastery.com

1 1 1 1 1

Filament Render Hooks: example with authentication pages

In this article, we’ll dive into an essential customization feature in Filament: Render Hooks. These hooks allow you to insert or modify HTML content in specific parts of your Filament pages without overriding or duplicating existing views. We'll demonstrate this with a practical example: adding a "Back to Website" link above the login and register forms in the admin panel.

What is a Render Hook?

A Render Hook in Filament is a predefined insertion point in the views where you can add HTML or Blade content using the FilamentView::registerRenderHook method.

Advantages of Render Hooks:

  • No need to publish or modify Filament's views.
  • Reduces potential conflicts during Filament updates.
  • Flexibility to inject content at strategic locations.

Practical example: adding a "Back to Website" link

Let’s explore how to add a "Back to Website" link above the login and register forms in the Filament admin panel.

This setup is added to the AppServiceProvider within the boot() method, ensuring the hooks are registered when the application boots. You can also use it on middleware.

namespace App\Providers;

use Filament\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        // Add a link above the login form
        FilamentView::registerRenderHook(
            PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE,
            fn (): string => Blade::render('<x-filament::link href="' . config('app.url') . '" size="sm" icon="heroicon-o-arrow-left">Back to Website</x-filament::link>')
        );

        // Add a link above the register form
        FilamentView::registerRenderHook(
            PanelsRenderHook::AUTH_REGISTER_FORM_BEFORE,
            fn (): string => Blade::render('<x-filament::link href="' . config('app.url') . '" size="sm" icon="heroicon-o-arrow-left">Back to Website</x-filament::link>')
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

Code breakdown

  1. Adding Hooks in AppServiceProvider:

    • The boot() method in the AppServiceProvider is ideal for registering hooks globally.
  2. Render Hooks Constants:

    • PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE: Inserts content just before the login form.
    • PanelsRenderHook::AUTH_REGISTER_FORM_BEFORE: Inserts content before the register form.
  3. Dynamic Links:

    • The config('app.url') ensures the link dynamically points to the homepage URL defined in the configuration.
  4. Blade Rendering:

    • The Blade::render method allows you to render Blade components or templates directly from PHP.

This pattern is used by Filament Mastery website and you can see it on Login and Registration member pages.

Multiple panels

If your project has multiple panels and you want to apply a render hook to only one of them, you can register it in the corresponding PanelProvider:

use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

class AdminPanelProvider extends PanelProvider
{
     public function panel(Panel $panel): Panel
     {
          return $panel
              ...
              ->renderHook(PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE, fn (): string => Blade::render('<x-filament::link href="' . config('app.url') . '" size="sm" icon="heroicon-o-arrow-left">back to website</x-filament::link>'))
              ...
     }
 }
Enter fullscreen mode Exit fullscreen mode

Going further with Render Hooks

Render Hooks are not limited to authentication pages. Filament offers a wide range of Render Hooks for customizing other parts of your panels. For a complete list of available Render Hooks, refer to the Filament Render Hooks documentation.

Render Hooks provide a clean and maintainable way to extend Filament’s functionality. By leveraging these hooks, you can customize your panels while keeping your codebase manageable and future-proof.

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

MongoDB Atlas runs apps anywhere. Try it now.

MongoDB Atlas runs apps anywhere. Try it now.

MongoDB Atlas lets you build and run modern apps anywhere—across AWS, Azure, and Google Cloud. With availability in 115+ regions, deploy near users, meet compliance, and scale confidently worldwide.

Start Free

👋 Kindness is contagious

Explore this insightful write-up, celebrated by our thriving DEV Community. Developers everywhere are invited to contribute and elevate our shared expertise.

A simple "thank you" can brighten someone’s day—leave your appreciation in the comments!

On DEV, knowledge-sharing fuels our progress and strengthens our community ties. Found this useful? A quick thank you to the author makes all the difference.

Okay