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 -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. -
react-virtualized
React components for efficiently rendering large lists and tabular data -
react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React -
tiptap
The headless rich text editor framework for web artisans. -
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. πΊπ¦ -
react-window
React components for efficiently rendering large lists and tabular data -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
react-dates
An easily internationalizable, mobile-friendly datepicker library for the web -
react-map-gl
React friendly API wrapper around MapboxGL JS -
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-content-loader
βͺ SVG-Powered component to easily create skeleton loadings. -
react-color
:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more -
react-datepicker
A simple and reusable datepicker component for React -
react-data-grid
Feature-rich and customizable data grid React component -
react-dropzone
Simple HTML5 drag-drop zone with React.js. -
victory
A collection of composable React components for building interactive data visualizations -
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable listβοΈ -
react-big-calendar
gcal/outlook like calendar 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-chartjs-2
React components for Chart.js, the most popular charting library -
react-pdf
Display PDFs in your React app as easily as if they were images. -
react-text-mask
Input mask for React, Angular, Ember, Vue, & plain JavaScript -
lightGallery
A customizable, modular, responsive, lightbox gallery plugin. -
react-draft-wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg -
google-map-react
Google map library for react that allows rendering components as markers :tada: -
react-day-picker
DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications. -
react-lazyload
Lazy load your component, image or anything matters the performance. -
react-autosuggest
WAI-ARIA compliant React autosuggest component -
fixed-data-table
A React table component designed to allow presenting thousands of rows of data.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* 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.