A React financial input component written in Typescript that works in mobile and desktop browsers.
Key features:
- auto-formatting to money format (i.e
123,456,789.01
) - prevents invalid input whether typed, dragged or pasted
- default
h
,k
,m
,b
multiplier keys
npm install financial-input
import { FinancialInput, FinancialInputProps } from 'financial-input';
...
const props: FinancialInputProps = {...}
...
return (
<div className='my-app'>
<FinancialInput {...props}/>
</div>
Type: number
Default: 2
Maximum number of decimal digits the value can take
Type: string
Default: ALL
The possible range of values that the value can take
Possible Values:
-
'ALL'
: Number can take any value -
'POSITIVE'
: Number can only be positive
Type: Object { [character]: multiplier }
Default: { 'h: 100, 'k': 1000, 'm': 1000000, 'b': 1000000000 }
An object mapping of shortcuts that the user can use to quickly enter common values.
E.g. with the default shortcuts, typing k
will multiply the number value by 1000
Retrieves the options on the input
Retrieves the formatted value of the input (string)
The following functions are exposed on the returned finput instance:
Install dependencies:
npm install
To see the component, you can run the example test app
npm start
You can also use storybook as well
npm run storybook
To add new dependencies, ensure they are correctly added in either dependencies
, peerDependencies
or devDependencies
.
-
npm run build
will create a build intodist
folder
Execute the tests locally:
npm test
npm publish
will publish the build files in dist
, there is a pre-publish step to always build when publishing.