Draw Signature

Renders a canvas for drawing a signature with a custom pen cursor. It allows users to start, draw, and finish signing. It is used in forms requiring digital signatures.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/draw-signature

npx layro-cli add @watermeloncorp/draw-signature

npx layro-cli add @watermeloncorp/draw-signature

bunx layro-cli add @watermeloncorp/draw-signature

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState, useRef, useEffect } from 'react';
import { motion, AnimatePresence, MotionConfig } from 'motion/react';
import { X } from 'lucide-react';
import { FaPen } from 'react-icons/fa6';
import { MdDraw } from 'react-icons/md';
import { FaCheckCircle, FaRedo } from 'react-icons/fa';
import { useTheme } from 'next-themes';
import useMeasure from 'react-use-measure';
import { cn } from '@/lib/utils';

interface DrawSignatureComponentProps {
  startLabel?: string;