Restrict input

Overview

ReactSketchCanvas allows you to restrict the input to a specific device. This is useful when you want to collect data from a specific device or prevent users from accidentally touching to draw while using a pen.

These are the available options:

• all (default) - All input devices are allowed.
• pen - Only pen input is allowed. This includes stylus, Apple Pencil, Wacom, Windows surface pen and other pen devices.
• mouse - Only mouse input is allowed.
• touch - Only touch input is allowed. This includes finger touch and other touch devices.

Default behavior

App.tsx

import { ReactSketchCanvas } from "react-sketch-canvas";

export default function App() {
  return (
    <div>
      <h1>Canvas</h1>
      <ReactSketchCanvas allowOnlyPointerType="all" />
    </div>
  );
}

Open Sandbox

Only allow pen input

App.tsx

import { ReactSketchCanvas } from "react-sketch-canvas";

export default function App() {
  return (
    <div>
      <h1>Canvas</h1>
      <ReactSketchCanvas allowOnlyPointerType="pen" />
    </div>
  );
}

Open Sandbox

Only allow mouse input

App.tsx

import { ReactSketchCanvas } from "react-sketch-canvas";

export default function App() {
  return (
    <div>
      <h1>Canvas</h1>
      <ReactSketchCanvas allowOnlyPointerType="mouse" />
    </div>
  );
}

Open Sandbox

Only allow touch input

App.tsx

import { ReactSketchCanvas } from "react-sketch-canvas";

export default function App() {
  return (
    <div>
      <h1>Canvas</h1>
      <ReactSketchCanvas allowOnlyPointerType="touch" />
    </div>
  );
}

Open Sandbox