designbyadrian/react-input-with-drag

Lightweight, zero-dependency, number input component with mouse drag actions just like in Blender and 3D Studio Max.

With over 15 years of experience in web development, I design and build mobile and desktop web apps using tools like Node.js and Angular. With past work in graphics and interaction design, and studies in computer science and human-computer interaction (HCI), I am Designer Slash Developer.

🎨 Creative Suite

History in desktop publishing, with over a decade of experience with the tools including Illustrator, PageMaker/InDesign, and, nowadays, the Affinity collection.

👽 UI/UX

University studies in Human-Computer Interaction, experience in prototyping and field testing, and devote in the school of Nielsen Norman.

💾 Computer Science

Foundation in computer history, networking, and object-oriented programming. Java. Don’t kill me.

Adrian von Gegerfelt, Sweden

react-input-with-drag's Issues

"min" property

If the min property is set to 0 then it is not taken into account.

I believe following condition is invalid:

if (props.min) newValue = Math.max(newValue, +props.min);

It should be:

if (props.min != undefined) newValue = Math.max(newValue, +props.min);

Cannot update a component (X) while rendering a different component (Y). To locate the bad setState() call inside

Thrown as soon as you drag.

The error references this article: facebook/react#18178 (comment), and points to this pile of code inside dist/index.esm.js

function te(ne) {
  var I = ne, { value: e, style: t2 = {}, modifiers: n = {}, onChange: r, onInput: a } = I, i = C(I, ["value", "style", "modifiers", "onChange", "onInput"]);
  let [y, v2] = (0, import_react22.useState)(""), [p, c] = (0, import_react22.useState)(""), K = (0, import_react22.useRef)(0), l = (0, import_react22.useRef)(null), L = i.step ? +i.step : 1, q = M({ shiftKey: 0.1 }, n), [, x] = (0, import_react22.useState)([0, 0]), z = { cursor: "ew-resize", _style: t2 }, O = (u2) => {
    let o = u2.target.value;
    v2(o), !isNaN(+o) && (r == null || r(+o, l.current));