A component for measuring & annotating images.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Latest commit cbf687e Dec 11, 2017 rmfisher rmfisher Removed unused CSS class in demo

README.md

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