{"id":23039294,"url":"https://github.com/javadbat/jb-number-input-react","last_synced_at":"2025-08-14T18:33:08.912Z","repository":{"id":248235501,"uuid":"828137018","full_name":"javadbat/jb-number-input-react","owner":"javadbat","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-01T15:53:08.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-14T11:45:39.878Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/javadbat.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-07-13T08:20:58.000Z","updated_at":"2024-12-01T15:53:13.000Z","dependencies_parsed_at":"2024-08-03T08:44:01.763Z","dependency_job_id":"5d4433cc-f223-46d2-9d6b-1eccebd7a8aa","html_url":"https://github.com/javadbat/jb-number-input-react","commit_stats":null,"previous_names":["javadbat/jb-numbet-input-react","javadbat/jb-number-input-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javadbat%2Fjb-number-input-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javadbat","download_url":"https://codeload.github.com/javadbat/jb-number-input-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229859799,"owners_count":18135511,"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-12-15T18:30:02.199Z","updated_at":"2024-12-15T18:30:02.829Z","avatar_url":"https://github.com/javadbat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jb-number-input\n\n\u003e [!WARNING]  \n\u003e this package is deprecated and moved to [jb-number-input/react](https://github.com/javadbat/jb-number-input/tree/main/react)\n\nthis is a superset component on [jb-number-input](https://github.com/javadbat/jb-number-input) just for react.\nit's also use [jb-input-react](https://github.com/javadbat/jb-input-react) for standard input props and styles    \n\nDemo: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-number-input) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBNumberInput.tsx) if you want to see and play with code    \n\nDemo: [stackblitz](https://stackblitz.com/edit/jb-number-input-react?file=src%2FApp.tsx)    \n\n## instructions\n\n### install\n\n#### using npm\n\n1- install npm package\n```cmd\nnpm i jb-number-input-react\n```\n\n2- import module and use it\n\n```jsx\nimport {JBNumberInput} from 'jb-number-input-react';\n\n\u003cJBNumberInput label=\"number:\" message=\"subtitle of input box\"\u003e\u003c/JBNumberInput\u003e\n\n```\n### get/set value\n\n```js\nconst [value,setValue] = useState(\"\");\n\u003cJBNumberInput value={value} onChange={(e)=\u003esetValue(e.target.value)}\u003e\u003c/JBNumberInput\u003e\n```\n### Config Number parameters\n\nif you want to control which number user may input, ex: you may want to let user input negative number or add min \u0026 max boundary or limit decimal precision. for doing so you can set number field parameter to jb-number-input.    \n\n```jsx\n    \u003cJBNumberInput\n        //how many number you want to + or  - on user press buttons or use arrow keys default is 1\n        step={100}\n        // how many decimal input accept default is infinity\n        decimalPrecision={2}\n        // what char replaced to input if user paste some illegal value default is '' (empty string)\n        invalidNumberReplacement={'0'}\n        // separate every 3 number with comma like 1000000 =\u003e 1,000,000\n        showThousandSeparator={false}\n        // which char we use to separate thousand number\n        thousandSeparator=','\n        //can input accept negative number or not\n        acceptNegative={true}\n        // max number value user can input. if user input bigger number it will be set to max\n        maxValue= {1000}\n        //min number value user can input. if user input smaller number it will be set to this value.\n        minValue = {1}\n        // will show persian number instead of english number in output but original input value remain in english char\n        //if true and user type 123 and see ۱۲۳ but inputtedDom.value will be 123\n        showPersianNumber={false}\n    \u003e\u003c/JBNumberInput\u003e\n  const numberInput = document.getElementByTagName('jb-number-input')\n\n```\n\n### set custom style\n\nin some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.    \nif you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component.\nsince jb-number-input use jb-input underneath, read [jb-input](https://github.com/javadbat/jb-input) custom style list.\n\n| variable                                       | description |\n|------------------------------------------------|-------------|\n| --jb-number-input-input-direction              | number input is ltr by default even in rtl page.so you should override it by this variable if you want it rtl or inherit |\n| --jb-number-input-button-width                 | |\n| --jb-number-input-increase-button-bg           | |\n| --jb-number-input-decrease-button-bg           | |\n| --jb-number-input-increase-button-border       | |\n| --jb-number-input-decrease-button-border       | |\n| --jb-number-input-increase-button-border-radius| |\n| --jb-number-input-decrease-button-border-radius| |\n| --jb-number-input-increase-button-color        | |\n| --jb-number-input-decrease-button-color        | |\n| --jb-number-input-increase-button-color-hover  | |\n| --jb-number-input-decrease-button-color-hover  | |\n\n### control Buttons\nyou can add `+` and `-` button into your box element for easier access to change the number with just simple click or touch.\nif you want to add this buttons you just have to set `showControlButton` of component:\n\n```jsx\n\u003cJBNumberInput showControlButton={true}\u003e\u003c/JBNumberInput\u003e\n```\nafter that if user click on the `+` or `-` value will increase or decrease base on the step you set in `step`(default is 1).    \nclick on `+` `-` button will call `onChange` event.\n\n## Other Related Docs:\n\n- see [jb-number-input](https://github.com/javadbat/jb-number-input) if you want to use this component as a pure-js web-component\n\n- see [All JB Design system Component List](https://github.com/javadbat/design-system/blob/master/docs/component-list.md) for more components\n\n- use [Contribution Guide](https://github.com/javadbat/design-system/blob/master/docs/contribution-guide.md) if you want to contribute in this component.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-number-input-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavadbat%2Fjb-number-input-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavadbat%2Fjb-number-input-react/lists"}