README

Digital signature capture component for Laravel applications. Supports touch and mouse input, customizable colors and stroke width, and exports to PNG data URL. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/signature-pad

Livewire Usage

Basic Usage

<livewire:sb-signature-pad />

Custom Dimensions

<livewire:sb-signature-pad
    :width="600"
    :height="200"
/>

Custom Colors

<livewire:sb-signature-pad
    stroke-color="#0000FF"
    background-color="#F5F5F5"
/>

Custom Stroke Width

<livewire:sb-signature-pad :stroke-width="3" />

With Wire Model

<livewire:sb-signature-pad wire:model="signature" />

Livewire Props

Methods

The component exposes a clear() method:

<livewire:sb-signature-pad wire:ref="signaturePad" />
<button wire:click="$refs.signaturePad.clear()">Clear</button>

Vue 3 Usage

Setup

import { SbSignaturePad } from './vendor/sb-signature-pad';
app.component('SbSignaturePad', SbSignaturePad);

Basic Usage

<template>
  <SbSignaturePad v-model="signature" />
</template>

<script setup>
import { ref } from 'vue';
const signature = ref(null);
</script>

Custom Configuration

<template>
  <SbSignaturePad
    v-model="signature"
    :width="500"
    :height="250"
    stroke-color="#1a365d"
    :stroke-width="3"
    background-color="#edf2f7"
    ref="pad"
  />
  <button @click="$refs.pad.clear()">Clear</button>
  <button @click="save">Save</button>
</template>

<script setup>
import { ref } from 'vue';
const signature = ref(null);

function save() {
  console.log('Signature:', signature.value); // Base64 PNG
}
</script>

Vue Props

Methods

Events

Saving Signatures

The signature is exported as a base64-encoded PNG data URL:

// In your Livewire component
public string $signature = '';

public function save()
{
    // $this->signature contains: data:image/png;base64,...

    // Save to file
    $data = base64_decode(str_replace('data:image/png;base64,', '', $this->signature));
    file_put_contents(storage_path('signatures/sig.png'), $data);

    // Or save to database
    $user->update(['signature' => $this->signature]);
}

Touch Support

The component supports:

• Mouse drawing (desktop)
• Touch drawing (tablets, phones)
• Prevents scrolling while signing

Styling

The signature pad includes:

• Rounded border
• Shadow on focus
• Clear button styling
• Responsive container

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License