touchpoints

Tiny React component for showing mobile touch points while recording demos from a device or a Simulator.

Install

npm install touchpoints

Usage

Render the component once near the app root. In Next.js, render it from a client component.

"use client";

import { TouchPoints } from "touchpoints";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <TouchPoints />
    </>
  );
}

Development

You will usually only want this in development, so render it conditionally in your app.

Vite:

import.meta.env.DEV ? <TouchPoints /> : null;

Next.js:

process.env.NODE_ENV !== "production" ? <TouchPoints /> : null;

Configuration

You can customise the indicator with size, color, and border:

<TouchPoints size={50} color="hotpink" border="3px solid blue" />

Props

interface TouchPointsProps {
  size?: number;
  color?: string;
  border?: string;
}

Acknowledgements

Heavy inspiration comes from visualizeTouches by @robb and TouchInspector by @jtrivedi