React-lasso-select

A responsive react tool for marking irregular areas in images (lasso / free select). No dependencies!

Demos

See src/App.tsx (https://akcyp.github.io/react-lasso-select/)

Features

• Responsive (you can change image size even while selecting!)
• Touch events support
• Keyboard support for precise selection
• No dependencies

Installation

# with npm
npm i react-lasso-select
# with yarn
yarn add react-lasso-select
# with pnpm
pnpm add react-lasso-select

Usage

Import the main js module:

import { ReactLassoSelect } from 'react-lasso-select';

Example

See: https://github.com/akcyp/react-lasso-select/blob/main/src/App.tsx

import { useState } from 'react';
import { ReactLassoSelect, getCanvas } from 'react-lasso-select';

export default function App() {
  const src = './demo.jpg';
  const [points, setPoints] = useState([]);
  const [clippedImg, setClippedImg] = useState();
  return (
    <div className="App">
      <ReactLassoSelect
        value={points}
        src={src}
        onChange={(value) => {
          setPoints(value);
        }}
        onComplete={(value) => {
          if (!value.length) return;
          getCanvas(src, value, (err, canvas) => {
            if (!err) {
              setClippedImg(canvas.toDataURL());
            }
          });
        }}
      />
      <div>Points: {points.map(({ x, y }) => `${x},${y}`).join(' ')}</div>
      <div>
        <img src={clippedImg} alt="" />
      </div>
    </div>
  );
}

Props

Most important props:

• src (string) (required) Specifies the path to the image (or base64 string)
• value (array of {x: number, y: number}) Specifies input value
• onComplete(path) Callback fired every time path has been closed / updated / reset (use it for better performance insead of onChange)
• onChange(path) Callback fired every time path has been changed (ex. point added/removed/replaced)

Props related to component:

• disabled (boolean, default false) Set to true to block selecting
• disabledShapeChange (boolean, default false) Set to true to block shape change, but preserve possibility to move whole selection
• style (object) CSS style attributes for component container
• viewBox ({width: number, height: number}) Viewbox attribute for svg element, avoid changing the default value.

Props related to image:

• imageAlt (string) Specifies an alternate text for the image, if the image for some reason cannot be displayed
• crossOrigin (string) CrossOrigin attributes for image element
• imageStyle (object) CSS style properties for image
• onImageLoad(event) A callback which happens when the image is loaded
• onImageError(event) Callback called when image is unable to load

Difference between onChange and onComplete props in terms of dragging

• onChange is triggered with every little movement while dragging points
• onComplete runs at the end of a drag, so it's better to use it for better performance

Tips for better user experience

There are some extra features made to improve user experience.

1. Press CTRL (Meta Key on Mac) while selecting area to straighten the path from the last point. (Keep the angle of 15 degrees)

2. Press CTRL + SHIFT keys to maintain parallelism to another sides.

Contributing / Developing

Feel free to post any PR or issues. Be here for information on features, bug fixes, or documentation.

You can help contributing this repository. You may need:

"engines": {
  "node": "^22.10.6",
  "pnpm": "^10.15.1"
}

To work locally run following commands:

corepack enable && corepack up # install and use pnpm 10.15.1
pnpm install
pnpm run dev

Before opening a PR, please check if pnpm run prod works correctly. Also make sure that pnpm run test pass.