DEV Community

Wallace Maxters
Wallace Maxters

Posted on

Filament: Image Color Picker component

Image Color Picker for Filament 3

This library contains a custom form field to pick color from a image.

Install

composer require wallacemaxters/filament-image-color-picker
Enter fullscreen mode Exit fullscreen mode

Usage

Basic Input Usage example:

use WallaceMaxters\FilamentImageColorPicker\ImageColorPicker;

// 

return $form->schema([
    TextInput::make('image_url')->url()->live(),
    ImageColorPicker::make('color')
        ->columnSpanFull()
        ->image(fn ($get) => $get('image_url')),
]);

Enter fullscreen mode Exit fullscreen mode

Use ImageColorPicker as Action:

 Forms\Components\ColorPicker::make('color')
    ->suffixAction(fn ($get) => 
        Forms\Components\Actions\Action::make('color-from-image')
            ->action(function ($set, array $data) {
                $set('color', $data['color']);
            })
            ->icon('heroicon-o-eye-dropper')
            ->form([
                ImageColorPicker::make('color')
                    ->format('hsl')
                    ->image(fn() => $get('image_url'))
            ])

    ),
Enter fullscreen mode Exit fullscreen mode

Preview

Filament Image Color Picker Preview

Github Source

https://github.com/wallacemaxters/filament-image-color-picker/tree/master

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay