{"id":16183792,"url":"https://github.com/tleunen/react-number-editor","last_synced_at":"2025-03-16T10:31:48.880Z","repository":{"id":22216861,"uuid":"25549625","full_name":"tleunen/react-number-editor","owner":"tleunen","description":"Custom number editor (text field) react component","archived":false,"fork":false,"pushed_at":"2023-07-19T08:58:02.000Z","size":87,"stargazers_count":70,"open_issues_count":4,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T07:42:35.119Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tleunen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2014-10-21T22:36:04.000Z","updated_at":"2023-10-25T12:56:01.000Z","dependencies_parsed_at":"2024-06-18T18:31:38.003Z","dependency_job_id":null,"html_url":"https://github.com/tleunen/react-number-editor","commit_stats":{"total_commits":61,"total_committers":13,"mean_commits":"4.6923076923076925","dds":"0.42622950819672134","last_synced_commit":"f947e96d585c5e2320f4a7c6c29863a8bd17efd6"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tleunen%2Freact-number-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tleunen%2Freact-number-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tleunen%2Freact-number-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tleunen%2Freact-number-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tleunen","download_url":"https://codeload.github.com/tleunen/react-number-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814895,"owners_count":20352036,"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":[],"created_at":"2024-10-10T07:07:00.912Z","updated_at":"2025-03-16T10:31:48.604Z","avatar_url":"https://github.com/tleunen.png","language":"JavaScript","funding_links":[],"categories":["Awesome React"],"sub_categories":["Tools"],"readme":"# react-number-editor\n\n[![NPM](https://nodei.co/npm/react-number-editor.png)](https://nodei.co/npm/react-number-editor/)\n\n![img](http://i.imgur.com/VIwMScb.gif)\n\nA [react](https://github.com/facebook/react) component to easily use number inputs. This one acts like those in After Effects or similar software.\n\n- Click and drag to slide the value.\n- Double-click to enter manually a new value.\n- Use your Up/Down keys to increment/decrement the value.\n- Hold shift key to step by bigger value.\n- Hold control/command key to step by smaller value.\n\n## Example\n\n```js\nvar React = require('react');\nvar NumberEditor = require('react-number-editor');\n\nReact.render(\n    \u003cNumberEditor min={0} max={1} step={0.01} decimals={2} onValueChange={onValueChange} /\u003e,\n    document.body\n);\n```\n\n## Usage\n\n### `\u003cNumberEditor /\u003e`\n\nHere are the list of properties available for the component:\n\n- `min` (number) the minimum value. Default no minimum\n- `max` (number) the maximum value. Default no maximum\n- `step` (number) the step to increment when sliding and with up/down arrows. Default 1.\n- `stepModifier` (number) how much to multiply/divide with the modifier keys (shift and control/command). Default is 10.\n- `decimals` (number) the number of decimals to show. Default 0.\n- `initialValue` (number) the default value to show. Default 0.\n- `className` (string) the class name to apply to the DOM element. Default empty.\n- `onValueChange` (function) The callback when the value changes. The value is passed as the parameter.\n-  onKeyDown (function) This callback is called when a key is pressed, after the control has processed the key press, and allows developers to implement their own shortcuts, etc.\n\n## demo\n\nTo run the demo, executes this command and go to `http://localhost:8080`:\n`npm run demo`\n\n## License\n\nMIT, see [LICENSE.md](/LICENSE.md) for details.\n\n## Thanks\n\nThanks to [@mattdesl](https://github.com/mattdesl) for his work on [number-editor](https://github.com/mattdesl/number-editor).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftleunen%2Freact-number-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftleunen%2Freact-number-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftleunen%2Freact-number-editor/lists"}