https://github.com/designbyadrian/react-interactive-input
Adjust values in numeric input boxes by clicking and dragging horizontally, just like in Blender and similar 3D applications.
https://github.com/designbyadrian/react-interactive-input
blender input input-validation react reactjs text-mask typescript
Last synced: 10 months ago
JSON representation
Adjust values in numeric input boxes by clicking and dragging horizontally, just like in Blender and similar 3D applications.
- Host: GitHub
- URL: https://github.com/designbyadrian/react-interactive-input
- Owner: designbyadrian
- License: mit
- Created: 2024-11-07T12:55:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-11T12:40:53.000Z (over 1 year ago)
- Last Synced: 2025-04-15T04:59:36.095Z (10 months ago)
- Topics: blender, input, input-validation, react, reactjs, text-mask, typescript
- Language: TypeScript
- Homepage: https://designbyadrian.github.io/react-interactive-input/
- Size: 2.38 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://designbyadrian.github.io/react-interactive-input).
đĻđšī¸đ
## Installation
To install the library, use npm or yarn:
```bash
npm install @designbyadrian/react-interactive-input
# or
yarn add @designbyadrian/react-interactive-input
```
## Usage
```jsx
import { InteractiveInput } from '@designbyadrian/react-interactive-input';
function MyComponent() {
return console.log(value)} />;
}
```
## Attributes
The `InteractiveInput` component accepts all properties of the HTMLInputElement element, especially the following attributes:
- `value`: The initial value of the input field.
- `onChange`: A callback function that receives the new value when it changes.
- `step`: The amount to increment or decrement the value when scrubbing.
- `min`: The minimum value allowed.
- `max`: The maximum value allowed.
## 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.
Example:
```jsx
import { MaskedInput } from '@designbyadrian/react-interactive-input';
function MyComponent() {
return (
console.log(parseFloat(e.target.value))}
/>
);
}
```
## Running locally
To run the project locally, follow these steps:
1. Clone the repository:
```bash
git clone
```
2. Install the dependencies:
```bash
npm install
# or
yarn
```
3. Start the development server:
```bash
npm run dev
# or
yarn dev
```
The project will be available at `http://localhost:6006`.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.