farazzshaikh/i-input

This is a number input component for React, built to work the same way numeric fields work in the 3D software Blender. If you have used Blender, you know that its number fields let you click and drag to change the value, type a math expression directly into the field, or type a value with a unit suffix like 5km or 3ft 2in. This library brings that same interaction style to any React app. The main interaction is called scrubbing: instead of clicking into a field and typing a number, you click and drag left or right (or up and down) and the number changes as you move. You can still click to type if you prefer. When you do type, you can enter a math expression such as 3 * 2 + 1 and the component will evaluate it. The unit parsing works across multiple unit systems, including metric lengths and imperial lengths, so you can type 1m + 2cm and get back a single number in whatever base unit you choose. The component has two forms. The first is a ready-to-use styled element called IInput that you drop into your page. The second is a headless hook called useIInput for situations where you want to apply the same behavior to your own custom-designed input. Both accept the same set of configuration options: a step size for how fast scrubbing changes the value, soft limits that cap scrubbing but still allow typing beyond them, hard limits that block any input outside the range, and a wrap mode for values that should roll over (such as angles that reset after 360 degrees). The library requires React 18 or newer and is installed through npm or yarn with a single command. It is written in TypeScript and ships type definitions. A live demo is linked in the README.