chore: add more examples

apps/docs/src/components/LiveCode.tsx

@@ -16,7 +16,7 @@ interface LiveCodeProps {
 export function LiveCode({
   files,
   editorClassName = "h-64",
-  previewClassName = "h-64",
+  previewClassName = "h-80",
 }: LiveCodeProps) {
   return (
     <div className="reset-wrapper mt-4">
@@ -42,7 +42,7 @@ export function LiveCode({
         >
           <SandpackCodeEditor showTabs />
         </SandpackLayout>
-        <div className="rounded-b-lg bg-zinc-900 p-4">
+        <div className="rounded-b-lg bg-zinc-900 p-2">
           <div className="overflow-hidden rounded bg-white p-1">
             <SandpackPreview
               className={previewClassName}

apps/docs/src/content/docs/examples/background.mdx

@@ -0,0 +1,15 @@
+---
+title: Background
+description: Setting up background of the canvas.
+sidebar:
+  order: 5
+---
+import { LiveCode } from "../../../components/LiveCode";
+import Background from "../../../examples/Background.tsx?raw";
+import BackgroundDataURI from "../../../examples/BackgroundDataURI.tsx?raw";
+
+<LiveCode client:load previewClassName="h-96" files={{ "App.tsx": Background }} />
+
+## Data URI as Background
+
+<LiveCode client:load previewClassName="h-96" files={{ "App.tsx": BackgroundDataURI }} />

apps/docs/src/content/docs/examples/sketching-time.mdx

@@ -0,0 +1,11 @@
+---
+title: Sketching time
+description: Measuring sketching time
+sidebar:
+  order: 6
+---
+
+import { LiveCode } from "../../../components/LiveCode";
+import SketchingTime from "../../../examples/SketchingTime.tsx?raw";
+
+<LiveCode client:load files={{ "App.tsx": SketchingTime }} />

apps/docs/src/content/docs/examples/undo-redo.mdx

@@ -0,0 +1,10 @@
+---
+title: Undo, Redo, Clear, and Reset
+description: Undo, Redo, Clear, and Reset the canvas.
+sidebar:
+  order: 4
+---
+import { LiveCode } from "../../../components/LiveCode";
+import UndoRedo from "../../../examples/UndoRedo.tsx?raw";
+
+<LiveCode client:load previewClassName="h-96" files={{ "App.tsx": UndoRedo }} />

apps/docs/src/content/docs/index.mdx

@@ -18,14 +18,15 @@ hero:
 
 import { Card, CardGrid } from "@astrojs/starlight/components";
 import { HomePageDemo } from "../../components/HomePageDemo";
+import { Link } from "@astrojs/check";
 
 <HomePageDemo client:load />
 
 ## Features
 
 <CardGrid>
   <Card title="Multi input support" icon="pencil">
-    Accepts input from Mouse, touch, and graphic tablets.
+    Accepts input from Mouse, touch, and graphic tablets. Example <a href="/react-sketch-canvas/examples/input-devices/">here</a>.
   </Card>
   <Card title="Vector-first drawing" icon="add-document">
     Freehand drawing with vector output with PNG & JPEG export.

apps/docs/src/examples/Background.tsx

@@ -0,0 +1,79 @@
+import { ReactSketchCanvas } from "react-sketch-canvas";
+import { type ChangeEvent, useState } from "react";
+
+const somePreserveAspectRatio = [
+  "none",
+  "xMinYMin",
+  "xMidYMin",
+  "xMaxYMin",
+  "xMinYMid",
+  "xMidYMid",
+  "xMaxYMid",
+  "xMinYMax",
+  "xMidYMax",
+  "xMaxYMax",
+] as const;
+
+type SomePreserveAspectRatio = (typeof somePreserveAspectRatio)[number];
+
+export default function App() {
+  const [backgroundImage, setBackgroundImage] = useState(
+    "https://images.pexels.com/photos/1193743/pexels-photo-1193743.jpeg?cs=srgb&fm=jpg",
+  );
+  const [preserveAspectRatio, setPreserveAspectRatio] =
+    useState<SomePreserveAspectRatio>("none");
+
+  const handlePreserveAspectRatioChange = (
+    event: ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setPreserveAspectRatio(event.target.value as SomePreserveAspectRatio);
+  };
+
+  const handleBackgroundImageChange = (
+    event: ChangeEvent<HTMLInputElement>,
+  ) => {
+    setBackgroundImage(event.target.value);
+  };
+
+  return (
+    <div className="d-flex flex-column gap-2 p-2">
+      <h1>Tools</h1>
+      <div className="d-flex gap-2 flex-column">
+        <div className="mb-3">
+          <label htmlFor="backgroundImage" className="form-label">
+            Background Image
+          </label>
+          <input
+            type="text"
+            className="form-control"
+            id="backgroundImage"
+            placeholder="URL of the image to use as a background"
+            value={backgroundImage}
+            onChange={handleBackgroundImageChange}
+          />
+        </div>
+        <label htmlFor="preserveAspectRatio" className="form-label">
+          Preserve Aspect Ratio
+        </label>
+        <select
+          id="preserveAspectRatio"
+          className="form-select form-select-sm"
+          aria-label="Preserve Aspect Ratio options"
+          value={preserveAspectRatio}
+          onChange={handlePreserveAspectRatioChange}
+        >
+          {somePreserveAspectRatio.map((value) => (
+            <option key={value} value={value}>
+              {value}
+            </option>
+          ))}
+        </select>
+      </div>
+      <h1>Canvas</h1>
+      <ReactSketchCanvas
+        backgroundImage={backgroundImage}
+        preserveBackgroundImageAspectRatio={preserveAspectRatio}
+      />
+    </div>
+  );
+}

apps/docs/src/examples/Colors.tsx

@@ -18,7 +18,7 @@ export default function App() {
   };
 
   return (
-    <div className="d-flex flex-column gap-2">
+    <div className="d-flex flex-column gap-2 p-2">
       <h1>Tools</h1>
       <div className="d-flex gap-2 align-items-center ">
         <label htmlFor="color">Stroke color</label>

apps/docs/src/examples/Drawing.tsx

@@ -29,18 +29,20 @@ export default function App() {
   };
 
   return (
-    <div className="d-flex flex-column gap-2">
+    <div className="d-flex flex-column gap-2 p-2">
       <h1>Tools</h1>
       <div className="d-flex gap-2 align-items-center ">
         <button
-          className="btn btn-sm btn-primary"
+          type="button"
+          className="btn btn-sm btn-outline-primary"
           disabled={!eraseMode}
           onClick={handlePenClick}
         >
           Pen
         </button>
         <button
-          className="btn btn-sm btn-primary"
+          type="button"
+          className="btn btn-sm btn-outline-primary"
           disabled={eraseMode}
           onClick={handleEraserClick}
         >

apps/docs/src/examples/ReadOnly.tsx

@@ -9,7 +9,7 @@ export default function App() {
   };
 
   return (
-    <div className="d-flex flex-column gap-2">
+    <div className="d-flex flex-column gap-2 p-2">
       <h1>Tools</h1>
       <div className="d-flex gap-2 align-items-center ">
         <div className="form-check form-switch">

apps/docs/src/examples/SketchingTime.tsx

@@ -0,0 +1,35 @@
+import {
+  ReactSketchCanvas,
+  type ReactSketchCanvasRef,
+} from "react-sketch-canvas";
+import { useRef, useState } from "react";
+
+export default function App() {
+  const canvasRef = useRef<ReactSketchCanvasRef>(null);
+  const [sketchingTime, setSketchingTime] = useState(0);
+
+  const handleSketchingTime = async () => {
+    const time = (await canvasRef.current?.getSketchingTime()) || 0;
+    setSketchingTime(time);
+  };
+
+  const sketchingTimeInSeconds = (sketchingTime / 1_000).toLocaleString();
+
+  return (
+    <div className="d-flex flex-column gap-2 p-2">
+      <h1>Tools</h1>
+      <div className="d-flex gap-2 align-items-center ">
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          onClick={handleSketchingTime}
+        >
+          Get Sketching Time
+        </button>
+        <span>{sketchingTimeInSeconds} seconds</span>
+      </div>
+      <h1>Canvas</h1>
+      <ReactSketchCanvas ref={canvasRef} withTimestamp />
+    </div>
+  );
+}

apps/docs/src/examples/UndoRedo.tsx

@@ -0,0 +1,91 @@
+import {
+  ReactSketchCanvas,
+  type ReactSketchCanvasRef,
+} from "react-sketch-canvas";
+import { useRef, useState } from "react";
+
+export default function App() {
+  const canvasRef = useRef<ReactSketchCanvasRef>(null);
+  const [eraseMode, setEraseMode] = useState(false);
+
+  const handleEraserClick = () => {
+    setEraseMode(true);
+    canvasRef.current?.eraseMode(true);
+  };
+
+  const handlePenClick = () => {
+    setEraseMode(false);
+    canvasRef.current?.eraseMode(false);
+  };
+
+  const handleUndoClick = () => {
+    canvasRef.current?.undo();
+  };
+
+  const handleRedoClick = () => {
+    canvasRef.current?.redo();
+  };
+
+  const handleClearClick = () => {
+    canvasRef.current?.clearCanvas();
+  };
+
+  const handleResetClick = () => {
+    canvasRef.current?.resetCanvas();
+  };
+
+  return (
+    <div className="d-flex flex-column gap-2 p-2">
+      <h1>Tools</h1>
+      <div className="d-flex gap-2 align-items-center ">
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          disabled={!eraseMode}
+          onClick={handlePenClick}
+        >
+          Pen
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          disabled={eraseMode}
+          onClick={handleEraserClick}
+        >
+          Eraser
+        </button>
+        <div className="vr" />
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          onClick={handleUndoClick}
+        >
+          Undo
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          onClick={handleRedoClick}
+        >
+          Redo
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          onClick={handleClearClick}
+        >
+          Clear
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary"
+          onClick={handleResetClick}
+        >
+          Reset
+        </button>
+      </div>
+      <h1>Canvas</h1>
+      <ReactSketchCanvas ref={canvasRef} />
+    </div>
+  );
+}

packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts

@@ -112,6 +112,9 @@ export interface ReactSketchCanvasRef extends CanvasRef {
   loadPaths: (paths: CanvasPath[]) => void;
   /**
    * Get the current drawing time in milliseconds. This will only work if withTimestamp prop is set to true.
+   *
+   * @remarks
+   * This does not include the idle time when the user is not drawing. It only includes the time when the user is drawing on the canvas.
    */
   getSketchingTime: () => Promise<number>;
   /**