React Interactive Input

In Blender and similar 3D applications, users can adjust values in numeric input boxes by clicking and dragging horizontally, often referred to as scrubbing.

The user typically clicks and holds the mouse over the number, then drags left or right to decrease or increase the value smoothly. This provides quick, precise control over numeric adjustments without needing to type manually or rely on up/down arrows.

This component is a React implementation of that behavior, with a few additional features and customizations.

Features

• Interactive Input: Click and drag to adjust numeric values smoothly.
• Customizable: Control the step, min, and max values for the input.
• Controlled Component: Fully controlled input field with a callback for value changes.
• Input Masking: Custom input component for handling negative numbers.
• Theming: Easily customize styles to match your application's look and feel.
• Accessibility: Built with accessibility in mind.

Try it out

You can try out the component in the Storybook.

🦄🕹️🍕

Installation

To install the library, use npm or yarn:

npm install @designbyadrian/react-interactive-input
# or
yarn add @designbyadrian/react-interactive-input

Usage

import { InteractiveInput } from '@designbyadrian/react-interactive-input';

function MyComponent() {
  return <InteractiveInput value={42} onChange={value => console.log(value)} />;
}

Attributes

The InteractiveInput component accepts all properties of the HTMLInputElement element, especially the following attributes:

• value: The controlled numeric value of the input field.
• onChange: A callback function that receives a change event when the value changes.
• step: The amount to increment or decrement the value when scrubbing.
• min: The minimum value allowed.
• max: The maximum value allowed.
• modifiers: Multipliers applied to step while a modifier key is held during scrubbing. Defaults to { shiftKey: 0.1, altKey: 1, ctrlKey: 1, metaKey: 1 }.

Scrubbing behavior

• A plain click focuses the field for manual text editing; scrubbing only starts once the pointer moves more than a few pixels horizontally. While the field is focused, dragging selects text as in a regular input.
• Scrubbing works with mouse, touch and pen (Pointer Events), and keeps working when the pointer leaves the element thanks to pointer capture.
• Modifier keys are read live from the pointer, so pressing or releasing e.g. Shift mid-drag changes the scrub speed immediately, without value jumps.
• Pressing Escape during a drag cancels it and restores the value from before the drag.
• After a scrub the field is blurred, so the next click-and-drag scrubs again.

Change events and controlled usage

All change events delivered to onChange — from typing, scrubbing, and arrow-key stepping alike — are genuine React ChangeEvents: event.target is the real input element and event.target.value is always a string in canonical dot-decimal format (a typed 1,5 is delivered as "1.5"), mirroring how native number inputs expose a locale-independent DOM value.

In-progress editing states are emitted as-is: an emptied field emits "" and a lone minus emits "-". Parse with parseFloat and decide what to do with NaN in your host (typically: keep the previous value). While the field is focused, the component never overwrites the text with values echoed back through the value prop, so typing -10, 0.5, or deleting everything and retyping works without artefacts. On blur, the text is normalized (007 becomes 7, 1. becomes 1, a lone - becomes empty) and reconciled with the value prop.

Components

The library exports two components: InteractiveInput and MaskedInput.

InteractiveInput

The main component for interactive input behavior.

MaskedInput

A custom input component featuring input masking specifically designed to address limitations with negative numbers in standard HTML input elements. This component ensures that negative values are properly formatted and accepted by the input field, preventing unexpected behavior or errors when handling signed numbers.

You can provide your own masking function to customize the behavior of the input field. A mask is a pure function (rawValue: string, previousValue: string) => string that returns the text to display — return previousValue to reject an edit.

Example:

import { MaskedInput } from '@designbyadrian/react-interactive-input';

function MyComponent() {
  return (
    <MaskedInput
      value="-4.2"
      onChange={e => console.log(parseFloat(e.target.value))}
    />
  );
}

Running locally

To run the project locally, follow these steps:

1. Clone the repository:

git clone

2. Install the dependencies:

npm install
# or
yarn

3. Start the development server:

npm run dev
# or
yarn dev

The project will be available at http://localhost:6006.

Releasing

Releases are tag-driven. Pushing a version tag runs the release workflow, which tests, publishes to npm, creates a GitHub Release, and deploys Storybook to GitHub Pages.

1. Bump the version in package.json and commit (e.g. 2.1.0).
2. Create and push a matching tag:

git tag v2.1.0
git push origin v2.1.0

3. The workflow validates the tag, runs tests, publishes to npm, creates a GitHub Release, and deploys Storybook.

The tag must match package.json exactly (v2.1.0 ↔ "version": "2.1.0"). Publishing the same version twice will fail.

Prerequisite: configure npm Trusted Publishing for this package with GitHub Actions — user designbyadrian, repository react-interactive-input, workflow filename release-package.yml, allowed action npm publish. No NPM_TOKEN secret is required. GitHub Pages should use the gh-pages branch as its source.

For a local Storybook deploy without releasing, use npm run deploy-storybook.

License

This project is licensed under the MIT License. See the LICENSE file for more information.