react-measurements alternatives and similar libraries
Based on the "UI Components" category.
Alternatively, view react-measurements alternatives based on common mentions on social networks and blogs.
-
Swiper
Most modern mobile touch slider with hardware accelerated transitions -
react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React -
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
react-virtualized
React components for efficiently rendering large lists and tabular data -
react-table
π€ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table -
sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. -
Mantine
React components library with native dark theme support -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
react-window
React components for efficiently rendering large lists and tabular data -
react-map-gl
React friendly API wrapper around MapboxGL JS -
react-dates
An easily internationalizable, mobile-friendly datepicker library for the web -
react-content-loader
βͺ SVG-Powered component to easily create skeleton loadings. -
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable listβοΈ -
react-color
:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more -
downshift π
π A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. -
AG Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript. -
react-dropzone
Simple HTML5 drag-drop zone with React.js. -
react-datepicker
A simple and reusable datepicker component for React -
victory
A collection of composable React components for building interactive data visualizations -
react-big-calendar
gcal/outlook like calendar component -
react-text-mask
Input mask for React, Angular, Ember, Vue, & plain JavaScript -
react-data-grid
Feature-rich and customizable data grid React component -
react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion -
react-pdf
Display PDFs in your React app as easily as if they were images. -
google-map-react
Google map library for react that allows rendering components as markers :tada: -
react-draft-wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg -
react-chartjs-2
React components for Chart.js, the most popular charting library -
lightGallery
A customizable, modular, responsive, lightbox gallery plugin. -
react-autosuggest
WAI-ARIA compliant React autosuggest component -
react-lazyload
Lazy load your component, image or anything matters the performance. -
react-day-picker
DayPicker is a customizable date picker component for React, with native TypeScript support. -
react-burger-menu
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-measurements or a related project?
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.