Popularity
1.9
Growing
Activity
0.7
Growing
107
4
1

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     React     React-component     Image    

react-measurements alternatives and similar libraries

Based on the "UI Components" category

Do you think we are missing an alternative of react-measurements or a related project?

Add another 'UI Components' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
More from our partner

README

react-measurements

A React component for measuring & annotating images.

Demo

Check out the demo here.

Usage

import React from "react";
import {
  MeasurementLayer,
  calculateDistance,
  calculateArea
} from "react-measurements";

class App extends React.Component {
  state = { measurements: [] };

  render() {
    return (
      <div
        style={{
          position: "absolute",
          width: "300px",
          height: "300px",
          backgroundColor: "#1a1a1a",
          fontFamily: "sans-serif"
        }}
      >
        <MeasurementLayer
          measurements={this.state.measurements}
          widthInPx={300}
          heightInPx={300}
          onChange={this.onChange}
          measureLine={this.measureLine}
          measureCircle={this.measureCircle}
        />
      </div>
    );
  }

  onChange = measurements => this.setState({ ...this.state, measurements });

  measureLine = line => Math.round(calculateDistance(line, 100, 100)) + " mm";

  measureCircle = circle =>
    Math.round(calculateArea(circle, 100, 100)) + " mm²";
}

Scope

The component is currently read-only on mobile. A mouse is required to create and edit measurements.

License

MIT


*Note that all licence references and agreements mentioned in the react-measurements README section above are relevant to that project's source code only.