Docs running with Livewire 4 - Beta try it →
maryUI

Signature

This component is a wrapper around signature_pad, for more details refer to its docs.

Setup 

<head>

    ...



    {{-- Signature Pad  --}}

    

</head>

Usage

It just extracts the signature as a base64 string after the end of each stroke.

Please, sign it.
<x-signature wire:model="signature1" hint="Please, sign it." />

So, you can display it later as a regular image. 

@php                                                  
    $signature2 = $this->signature2;     
@endphp                                             
<img src="{{ $signature2 }}" class="bg-pink-100 h-24 rounded-lg" />

Customize 

{{-- Do not set the `width`. It is always 100% --}}



<x-signature

    wire:model="signature3"

    clear-text="Delete it!"

    height="100"

    class="border-4 !bg-info/10" />

If you want to set the width use an outer div. 

<div class="w-44">

    <x-signature ... />

</div>

You can set any configuration describe at signature_pad docs. 

<x-signature wire:model="signature4" :config="['penColor' => 'red']" />
Made with by Robson Tenório and contributors.