{"id":19468207,"url":"https://github.com/designbyadrian/react-interactive-input","last_synced_at":"2025-04-15T04:59:44.778Z","repository":{"id":261763868,"uuid":"884819158","full_name":"designbyadrian/react-interactive-input","owner":"designbyadrian","description":"Adjust values in numeric input boxes by clicking and dragging horizontally, just like in Blender and similar 3D applications.","archived":false,"fork":false,"pushed_at":"2024-11-11T12:40:53.000Z","size":2499,"stargazers_count":5,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T04:59:36.095Z","etag":null,"topics":["blender","input","input-validation","react","reactjs","text-mask","typescript"],"latest_commit_sha":null,"homepage":"https://designbyadrian.github.io/react-interactive-input/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/designbyadrian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-07T12:55:10.000Z","updated_at":"2025-04-03T00:02:55.000Z","dependencies_parsed_at":"2024-11-08T10:39:03.474Z","dependency_job_id":null,"html_url":"https://github.com/designbyadrian/react-interactive-input","commit_stats":null,"previous_names":["designbyadrian/react-interactive-input"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designbyadrian%2Freact-interactive-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designbyadrian%2Freact-interactive-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designbyadrian%2Freact-interactive-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designbyadrian%2Freact-interactive-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/designbyadrian","download_url":"https://codeload.github.com/designbyadrian/react-interactive-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249010212,"owners_count":21197797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blender","input","input-validation","react","reactjs","text-mask","typescript"],"created_at":"2024-11-10T18:39:49.451Z","updated_at":"2025-04-15T04:59:44.757Z","avatar_url":"https://github.com/designbyadrian.png","language":"TypeScript","readme":"\u003ccenter\u003e\n  \u003cimg src=\"assets/interactive-input-icon.svg\" alt=\"\" height=\"64\" aria-hidden=\"true\" /\u003e\n  \u003ch1\u003eReact Interactive Input\u003c/h1\u003e\n\u003c/center\u003e\n\n![NPM Version](https://img.shields.io/npm/v/%40designbyadrian%2Freact-interactive-input?style=for-the-badge) ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40designbyadrian%2Freact-interactive-input?style=for-the-badge\u0026label=size) ![npm bundle size](https://img.shields.io/bundlephobia/min/%40designbyadrian/react-interactive-input/2.0.2?style=for-the-badge\u0026label=minified) ![GitHub License](https://img.shields.io/github/license/designbyadrian/react-interactive-input?style=for-the-badge)\n\nIn Blender and similar 3D applications, users can adjust values in numeric input boxes by clicking and dragging horizontally, often referred to as **scrubbing.**\n\nThe 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.\n\nThis component is a React implementation of that behavior, with a few additional features and customizations.\n\n## Features\n\n- **Interactive Input**: Click and drag to adjust numeric values smoothly.\n- **Customizable**: Control the step, min, and max values for the input.\n- **Controlled Component**: Fully controlled input field with a callback for value changes.\n- **Input Masking**: Custom input component for handling negative numbers.\n- **Theming**: Easily customize styles to match your application's look and feel.\n- **Accessibility**: Built with accessibility in mind.\n\n## Try it out\n\nYou can try out the component in the [Storybook](https://designbyadrian.github.io/react-interactive-input).\n\n🦄🕹️🍕\n\n## Installation\n\nTo install the library, use npm or yarn:\n\n```bash\nnpm install @designbyadrian/react-interactive-input\n# or\nyarn add @designbyadrian/react-interactive-input\n```\n\n## Usage\n\n```jsx\nimport { InteractiveInput } from '@designbyadrian/react-interactive-input';\n\nfunction MyComponent() {\n  return \u003cInteractiveInput value={42} onChange={value =\u003e console.log(value)} /\u003e;\n}\n```\n\n## Attributes\n\nThe `InteractiveInput` component accepts all properties of the HTMLInputElement element, especially the following attributes:\n\n- `value`: The initial value of the input field.\n- `onChange`: A callback function that receives the new value when it changes.\n- `step`: The amount to increment or decrement the value when scrubbing.\n- `min`: The minimum value allowed.\n- `max`: The maximum value allowed.\n\n## Components\n\nThe library exports two components: `InteractiveInput` and `MaskedInput`.\n\n### InteractiveInput\n\nThe main component for interactive input behavior.\n\n### MaskedInput\n\nA 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.\n\nYou can provide your own masking function to customize the behavior of the input field.\n\nExample:\n\n```jsx\nimport { MaskedInput } from '@designbyadrian/react-interactive-input';\n\nfunction MyComponent() {\n  return (\n    \u003cMaskedInput\n      value=\"-4.2\"\n      onChange={e =\u003e console.log(parseFloat(e.target.value))}\n    /\u003e\n  );\n}\n```\n\n## Running locally\n\nTo run the project locally, follow these steps:\n\n1. Clone the repository:\n\n```bash\ngit clone\n```\n\n2. Install the dependencies:\n\n```bash\nnpm install\n# or\nyarn\n```\n\n3. Start the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nThe project will be available at `http://localhost:6006`.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignbyadrian%2Freact-interactive-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignbyadrian%2Freact-interactive-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignbyadrian%2Freact-interactive-input/lists"}