Guides
Restricting pointer input
Limit drawing to a specific pointer device.
By default, ReactSketchCanvas accepts every pointer type the browser reports. That is the right default for most cases. Production interfaces often need tighter control; for example, a stylus-first note app may want to ignore finger touches so users can rest their hand on a tablet.
Use the allowOnlyPointerType prop to restrict input.
Options
all(default): every pointer device draws.pen: only pen input, including stylus, Apple Pencil, Wacom, Surface Pen.mouse: only mouse input.touch: only finger touch.
Try each mode
The default. Every supported pointer type draws.
Allowed InputsAll Pointer Types Allowed (Mouse, Stylus & Touch)
import { Hand, MousePointer, Pencil } from "lucide-react";import { ReactSketchCanvas } from "react-sketch-canvas";export default function App() { return ( <div className="not-prose flex flex-col gap-4 w-full"> {/* Input Header Status */} <div className="flex items-center gap-4 p-4 rounded-lg border border-fd-border bg-fd-card shadow-sm text-fd-foreground"> <div className="flex items-center gap-3"> <div className="flex -space-x-2"> <div className="p-2 rounded-full border bg-emerald-500/10 border-emerald-500/20 text-emerald-500 z-20"> <MousePointer className="w-4 h-4" /> </div> <div className="p-2 rounded-full border bg-blue-500/10 border-blue-500/20 text-blue-500 z-10"> <Pencil className="w-4 h-4" /> </div> <div className="p-2 rounded-full border bg-purple-500/10 border-purple-500/20 text-purple-500"> <Hand className="w-4 h-4" /> </div> </div> <div className="flex flex-col"> <span className="text-xs font-semibold uppercase tracking-wider text-fd-muted-foreground"> Allowed Inputs </span> <span className="text-sm font-medium"> All Pointer Types Allowed (Mouse, Stylus & Touch) </span> </div> </div> </div> {/* Canvas Workspace */} <div className="relative overflow-hidden rounded-lg border border-fd-border aspect-video min-h-[240px] shadow-sm"> <ReactSketchCanvas allowOnlyPointerType="all" strokeColor="var(--color-fd-primary)" canvasColor="transparent" /> </div> </div> );}Best for stylus-first experiences: tablet annotation, handwriting, signature flows where accidental touch marks are costly.
Allowed InputsStylus & Pen Only (Mouse & Touch gestures are ignored)
import { Pencil } from "lucide-react";import { ReactSketchCanvas } from "react-sketch-canvas";export default function App() { return ( <div className="not-prose flex flex-col gap-4 w-full"> {/* Input Header Status */} <div className="flex items-center gap-4 p-4 rounded-lg border border-fd-border bg-fd-card shadow-sm text-fd-foreground"> <div className="flex items-center gap-3"> <div className="p-2 rounded-full border bg-blue-500/10 border-blue-500/20 text-blue-500 shadow-sm"> <Pencil className="w-5 h-5" /> </div> <div className="flex flex-col"> <span className="text-xs font-semibold uppercase tracking-wider text-fd-muted-foreground"> Allowed Inputs </span> <span className="text-sm font-medium"> Stylus & Pen Only (Mouse & Touch gestures are ignored) </span> </div> </div> </div> {/* Canvas Workspace */} <div className="relative overflow-hidden rounded-lg border border-fd-border aspect-video min-h-[240px] shadow-sm"> <ReactSketchCanvas allowOnlyPointerType="pen" strokeColor="var(--color-fd-primary)" canvasColor="transparent" /> </div> </div> );}Useful for desktop-only drawing areas: admin tools, demos, or test fixtures where touch and pen input would muddy the interaction.
Allowed InputsMouse Pointer Only (Stylus & Touch inputs are ignored)
import { MousePointer } from "lucide-react";import { ReactSketchCanvas } from "react-sketch-canvas";export default function App() { return ( <div className="not-prose flex flex-col gap-4 w-full"> {/* Input Header Status */} <div className="flex items-center gap-4 p-4 rounded-lg border border-fd-border bg-fd-card shadow-sm text-fd-foreground"> <div className="flex items-center gap-3"> <div className="p-2 rounded-full border bg-emerald-500/10 border-emerald-500/20 text-emerald-500 shadow-sm"> <MousePointer className="w-5 h-5" /> </div> <div className="flex flex-col"> <span className="text-xs font-semibold uppercase tracking-wider text-fd-muted-foreground"> Allowed Inputs </span> <span className="text-sm font-medium"> Mouse Pointer Only (Stylus & Touch inputs are ignored) </span> </div> </div> </div> {/* Canvas Workspace */} <div className="relative overflow-hidden rounded-lg border border-fd-border aspect-video min-h-[240px] shadow-sm"> <ReactSketchCanvas allowOnlyPointerType="mouse" strokeColor="var(--color-fd-primary)" canvasColor="transparent" /> </div> </div> );}Focused on mobile and kiosk-style experiences where finger input is the only expected input.
Allowed InputsTouch Gestures Only (Stylus & Mouse pointers are ignored)
import { Hand } from "lucide-react";import { ReactSketchCanvas } from "react-sketch-canvas";export default function App() { return ( <div className="not-prose flex flex-col gap-4 w-full"> {/* Input Header Status */} <div className="flex items-center gap-4 p-4 rounded-lg border border-fd-border bg-fd-card shadow-sm text-fd-foreground"> <div className="flex items-center gap-3"> <div className="p-2 rounded-full border bg-purple-500/10 border-purple-500/20 text-purple-500 shadow-sm"> <Hand className="w-5 h-5" /> </div> <div className="flex flex-col"> <span className="text-xs font-semibold uppercase tracking-wider text-fd-muted-foreground"> Allowed Inputs </span> <span className="text-sm font-medium"> Touch Gestures Only (Stylus & Mouse pointers are ignored) </span> </div> </div> </div> {/* Canvas Workspace */} <div className="relative overflow-hidden rounded-lg border border-fd-border aspect-video min-h-[240px] shadow-sm"> <ReactSketchCanvas allowOnlyPointerType="touch" strokeColor="var(--color-fd-primary)" canvasColor="transparent" /> </div> </div> );}The browser decides which pointer type each event belongs to. Some devices report pen events that look like mouse events, and vice versa. Test on real hardware before shipping a restricted canvas to production.