{"id":19306011,"url":"https://github.com/protofire/big-number-input","last_synced_at":"2025-10-26T15:07:33.472Z","repository":{"id":36710231,"uuid":"228396183","full_name":"protofire/big-number-input","owner":"protofire","description":"React input component for big number values","archived":false,"fork":false,"pushed_at":"2023-01-05T03:08:17.000Z","size":310,"stargazers_count":20,"open_issues_count":15,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-19T15:18:15.651Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/protofire.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}},"created_at":"2019-12-16T13:43:07.000Z","updated_at":"2024-04-21T11:08:46.000Z","dependencies_parsed_at":"2023-01-17T04:14:44.659Z","dependency_job_id":null,"html_url":"https://github.com/protofire/big-number-input","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/protofire/big-number-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Fbig-number-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Fbig-number-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Fbig-number-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Fbig-number-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/protofire","download_url":"https://codeload.github.com/protofire/big-number-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/protofire%2Fbig-number-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281122161,"owners_count":26447303,"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","status":"online","status_checked_at":"2025-10-26T02:00:06.575Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-11-10T00:03:50.205Z","updated_at":"2025-10-26T15:07:33.435Z","avatar_url":"https://github.com/protofire.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# big-number-input\n\nA BigNumberInput to use with decentralized applications and React.\n\n[![Build Status](https://travis-ci.com/protofire/big-number-input.svg?branch=master)](https://travis-ci.com/protofire/big-number-input)\n[![NPM version](https://badge.fury.io/js/big-number-input.svg)](https://npmjs.org/package/big-number-input)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/protofire/big-number-input/master/LICENSE)\n[![dependencies Status](https://david-dm.org/protofire/big-number-input/status.svg)](https://david-dm.org/protofire/big-number-input)\n[![devDependencies Status](https://david-dm.org/protofire/big-number-input/dev-status.svg)](https://david-dm.org/protofire/big-number-input?type=dev)\n\n## The problem\n\nYou are using big integer numbers that can be expressed as smaller fractional numbers and you want users to be able to\nenter them in this format. The originating use case for this library are ERC20 tokens, but a simpler example is having\nsome amount expressed in millions. You want the user to input `1.5` but to receive a bignumber containing `1500000`. In\nthis case, you can use `big-number-input` with a `decimals` value of 6. See `Usage` below for more information.\n\n## Installation\n\n```shell\nnpm install big-number-input\n```\n\n## Usage\n\nImport the component and pass the required props:\n\n```typescript\nimport React from 'react'\nimport { BigNumberInput } from 'big-number-input'\n\nfunction App() {\n  const [value, setValue] = React.useState('1000000')\n\n  return (\n    \u003cdiv\u003e\n      \u003cBigNumberInput\n        decimals={6}\n        onChange={setValue}\n        value={value}\n      /\u003e\n      \u003cdiv\u003e{value || 'empty'}\u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nIn this case the input value is 1000000 and the rendered value will be 1. If the user changes it to 2 in the UI the onChange will be called with 2000000.\n\n\nThe required props are:\n\n- `decimals`: The number of decimals you want to use\n- `value`: A string with the raw value that will be used by the input, eg. 1000000.\n- `onChange`: A function that receives the new raw value, or an empty string when the input is empty\n\nThen you have a bunch of optional props you can use:\n\n- `autofocus`: Set to true if you want the input to obtain focus as soon as it's rendered\n- `placeholder`: A string to use as the input's placeholder\n- `disabled`: A boolean used to disable the input\n- `min`, `max` and `step`: The min and max values you want to use and the step used when you increase or decrease the\n  number with the arrow keys or by clicking the arrows in the input. These values are also strings with the raw values and are interpreted with the same number of decimals as the main value.\n\n### Using a different input component\n\nIf you want to use a different input, for example the `Input` from [Material UI](https://material-ui.com/), you can use\nthe `renderInput` prop:\n\n```typescript\nimport React from 'react';\nimport { BigNumberInput } from 'big-number-input'\nimport { Input } from '@material-ui/core'\n\n\nfunction App() {\n  const [value, setValue] = React.useState('')\n\n  return (\n    \u003cdiv\u003e\n      \u003cBigNumberInput decimals={6} onChange={setValue} value={value} renderInput={\n        props =\u003e \u003cInput {...props} /\u003e\n      }/\u003e\n      \u003cdiv\u003e{value || 'empty'}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Converting to and from a big number\n\nIf you want to use some big number library to store your value, you can follow an approach like this:\n\n```typescript\nimport React from \"react\";\nimport Big from 'big.js'\nimport { BigNumberInput } from \"big-number-input\";\n\nfunction App() {\n  const [value, setValue] = React.useState(null);\n  return (\n    \u003cdiv\u003e\n      \u003cBigNumberInput\n        autofocus={true}\n        decimals={6}\n        onChange={newValue =\u003e newValue ? setValue(new Big(newValue)) : setValue(null)}\n        value={value ? value.toString() : ''}\n      /\u003e\n      \u003cdiv\u003e{value ? value.toString() : \"empty\"}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nHere we use `null` to indicate an empty input, and a big number instance when there is something entered in the input.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotofire%2Fbig-number-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprotofire%2Fbig-number-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprotofire%2Fbig-number-input/lists"}