{"id":13422210,"url":"https://github.com/anatoliygatt/numeric-stepper","last_synced_at":"2025-03-15T11:31:24.034Z","repository":{"id":36971779,"uuid":"478587669","full_name":"anatoliygatt/numeric-stepper","owner":"anatoliygatt","description":"🎛 A numeric stepper component for React.","archived":false,"fork":false,"pushed_at":"2023-07-01T20:55:35.000Z","size":8842,"stargazers_count":161,"open_issues_count":7,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-20T02:17:55.244Z","etag":null,"topics":["accessible","component","javascript","numeric","numeric-stepper","react","react-component","stepper","typescript"],"latest_commit_sha":null,"homepage":"https://numeric-stepper.netlify.app","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/anatoliygatt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-06T14:08:10.000Z","updated_at":"2024-09-03T10:12:18.000Z","dependencies_parsed_at":"2024-06-19T20:02:06.869Z","dependency_job_id":"3c08333c-11af-4ad7-9a0c-60e3969c1b84","html_url":"https://github.com/anatoliygatt/numeric-stepper","commit_stats":{"total_commits":73,"total_committers":3,"mean_commits":"24.333333333333332","dds":0.3287671232876712,"last_synced_commit":"ceef071427c7ed09c68b4c9ffab53fff4adc05e5"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fnumeric-stepper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fnumeric-stepper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fnumeric-stepper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anatoliygatt%2Fnumeric-stepper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anatoliygatt","download_url":"https://codeload.github.com/anatoliygatt/numeric-stepper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221572066,"owners_count":16845574,"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":["accessible","component","javascript","numeric","numeric-stepper","react","react-component","stepper","typescript"],"created_at":"2024-07-30T23:00:39.269Z","updated_at":"2024-10-26T19:32:32.018Z","avatar_url":"https://github.com/anatoliygatt.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Form Components"],"readme":"\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"assets/demo.gif\" alt=\"numeric-stepper Demo\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003ch1 align=\"center\"\u003enumeric-stepper\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eA numeric stepper component for \u003ca href=\"https://reactjs.org\"\u003eReact\u003c/a\u003e. Inspired by Ehsan Rahimi's \u003ca href=\"https://dribbble.com/shots/16434514-Tally-Counter-Micro-Interaction\"\u003eTally Counter Micro-Interaction\u003c/a\u003e Dribbble shot.\u003c/h3\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/anatoliygatt/numeric-stepper/actions?query=workflow%3ACI\"\u003e\n \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/anatoliygatt/numeric-stepper/ci.yml?branch=master\u0026style=for-the-badge\u0026logo=github\u0026label=CI\u0026labelColor=000000\" alt=\"GitHub CI Workflow Status\"\u003e\n \u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/@anatoliygatt/numeric-stepper\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/@anatoliygatt/numeric-stepper.svg?style=for-the-badge\u0026logo=npm\u0026labelColor=000000\" alt=\"NPM Version\"\u003e\n \u003c/a\u003e\n \u003ca href=\"https://github.com/anatoliygatt/numeric-stepper/blob/master/LICENSE\"\u003e\n \u003cimg src=\"https://img.shields.io/github/license/anatoliygatt/numeric-stepper.svg?style=for-the-badge\u0026logo=opensourceinitiative\u0026logoColor=ffffff\u0026labelColor=000000\" alt=\"License\"\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## 📖 Table of Contents\n\n- [🚀 Getting Started](#-getting-started)\n - [🐇 Jump Start](#-jump-start)\n - [💻 Live Demo](#-live-demo)\n- [⚙️ Configuration](#%EF%B8%8F-configuration)\n- [♿️ Accessibility](#%EF%B8%8F-accessibility)\n- [👨🏼‍⚖️ License](#%EF%B8%8F-license)\n\n## 🚀 Getting Started\n\n### 🐇 Jump Start\n\n```shell\nnpm install @anatoliygatt/numeric-stepper @emotion/react @emotion/styled framer-motion\n```\n\n```jsx\nimport { useState } from 'react';\nimport { NumericStepper } from '@anatoliygatt/numeric-stepper';\n\nfunction Example() {\n const INITIAL_VALUE = 20;\n const [value, setValue] = useState(INITIAL_VALUE);\n return (\n \u003cNumericStepper\n minimumValue={10}\n maximumValue={100}\n stepValue={10}\n initialValue={INITIAL_VALUE}\n size=\"lg\"\n inactiveTrackColor=\"#fed7aa\"\n activeTrackColor=\"#fddec0\"\n activeButtonColor=\"#ffedd5\"\n inactiveIconColor=\"#fb923c\"\n hoverIconColor=\"#ea580c\"\n activeIconColor=\"#9a3412\"\n disabledIconColor=\"#fdba74\"\n thumbColor=\"#f97316\"\n thumbShadowAnimationOnTrackHoverEnabled={false}\n focusRingColor=\"#fff7ed\"\n onChange={(value) =\u003e {\n setValue(value);\n }}\n /\u003e\n );\n}\n```\n\n### 💻 Live Demo\n\n[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/demo-for-anatoliygatt-numeric-stepper-mllfyl)\n\n## ⚙️ Configuration\n\n`NumericStepper` supports the following props:\n\n| Prop | Type | Default value | Description |\n| ------------------------------------------- | -------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| minimumValue | number | `0` | The minimum value. |\n| maximumValue | number | `Number.MAX_SAFE_INTEGER` | The maximum value. |\n| stepValue | number | `1` | The step increment value. |\n| initialValue | number | `minimumValue` | The initial value. |\n| onChange | Function | `undefined` | The callback invoked when the value changes. |\n| size | string | `sm` | The size of the numeric stepper. There are 3 available sizes:\u003cul\u003e\u003cli\u003e`sm` — 185x74px\u003c/li\u003e\u003cli\u003e`md` — 277.5x111px\u003c/li\u003e\u003cli\u003e`lg` — 370x148px\u003c/li\u003e\u003c/ul\u003e |\n| inactiveTrackColor | string | `#2b2b2b` | The color of the track while the thumb is not being horizontally dragged. |\n| activeTrackColor | string | `#1f1f1f` | The color of the track while the thumb is being horizontally dragged and is at the maximum trackable distance from the track's center. |\n| hoverButtonColor | string | `transparent` | The color of the decrement/increment button in a hover state. |\n| activeButtonColor | string | `#ececec` | The color of the decrement/increment button in an active state. |\n| inactiveIconColor | string | `#858585` | The color of the decrement/increment button icon in an inactive state. |\n| hoverIconColor | string | `#ffffff` | The color of the decrement/increment button icon in a hover state. |\n| activeIconColor | string | `#000000` | The color of the decrement/increment button icon in an active state. |\n| disabledIconColor | string | `#383838` | The color of the decrement/increment button icon in a disabled state. |\n| thumbColor | string | `#444444` | The color of the thumb. |\n| thumbLabelColor | string | `#ffffff` | The color of the thumb's label. |\n| thumbShadowAnimation\u003cbr\u003eOnTrackHoverEnabled | boolean | `true` | If `true`, the thumb's shadow will animate when hovering over the track. |\n| focusRingColor | string | `#ececec` | The color of the focus ring of the interactive elements. |\n\nIn order to customise the thumb's font settings, we can use CSS, like so:\n\n```css\n[data-testid='numeric-stepper-thumb'] {\n font-family: 'Times New Roman', Times, serif;\n font-style: italic;\n font-weight: 800;\n}\n```\n\n## ♿️ Accessibility\n\nIn order to comply with the web accessibility standards, we must make use of the `decrementButtonAriaLabel` and `incrementButtonAriaLabel` props, like so:\n\n```jsx\nfunction AccessibleExample() {\n return (\n \u003cNumericStepper\n decrementButtonAriaLabel=\"Decrement\"\n incrementButtonAriaLabel=\"Increment\"\n /\u003e\n );\n}\n```\n\nAlso, we can use a `thumbAriaLabel` prop to provide a description for the value rendered inside a thumb, like so:\n\n```jsx\nfunction EnhancedThumbAccessibilityExample() {\n const [value, setValue] = useState(0);\n return (\n \u003cNumericStepper\n thumbAriaLabel={`${value} items`}\n onChange={(value) =\u003e {\n setValue(value);\n }}\n /\u003e\n );\n}\n```\n\n## 👨🏼‍⚖️ License\n\n[MIT](https://github.com/anatoliygatt/numeric-stepper/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanatoliygatt%2Fnumeric-stepper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanatoliygatt%2Fnumeric-stepper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanatoliygatt%2Fnumeric-stepper/lists"}