react-ruler-guides

Illustrator/Figma-style horizontal + vertical rulers for React, with draggable guide lines you can place, move, duplicate (hold Option/Ctrl while dragging), and remove (right-click).

Install

npm install react-ruler-guides

react and react-dom (16.8+) are peer dependencies — this library doesn't bundle its own copy of React.

Usage

Wrap the element you want rulers around in a positioned container, and render Ruler as an absolutely-positioned overlay inside it:

import { Ruler } from "react-ruler-guides"

function Canvas() {
  return (
    <div style={{ position: "relative", width: 800, height: 600 }}>
      <Ruler />
      {/* your canvas / artboard content */}
    </div>
  )
}

The ruler measures its parent automatically via ResizeObserver, so it will resize along with the container.

Props

| Prop | Type | Default | Description | | ---------------------- | ------------------------ | ---------- | --------------------------------------------- | | showGuides | boolean | true | Render guides that have been placed | | lightMode | boolean | false | Use the light theme instead of dark | | showHorizontalRuler | boolean | true | Show the horizontal ruler strip | | horizontalPosition | "top" \| "bottom" | "top" | Which edge the horizontal ruler sits on | | showVerticalRuler | boolean | true | Show the vertical ruler strip | | verticalPosition | "left" \| "right" | "left" | Which edge the vertical ruler sits on |

Interactions

• Click-drag from a ruler into the canvas to place a new guide.
• Drag a guide to reposition it.
• Hold Option (macOS) / Ctrl (Windows/Linux) while dragging a guide to duplicate it instead of moving it.
• Right-click a guide to remove it.

Development

npm install
npm run build   # bundles ESM + CJS + .d.ts into dist/
npm run dev      # watch mode

Publishing

npm login
npm publish

(The package name react-ruler-guides may already be taken on npm — check with npm view react-ruler-guides first, and rename it in package.json and this README if so.)

License

MIT