Financial Transaction Amount Input

Build a React component that allows users to input financial transaction amounts with high precision. The component must handle very large monetary values (beyond JavaScript's safe integer limits) and very small fractional amounts without losing precision.

Requirements

The component should:

1. Accept and display monetary amounts up to 18 digits without precision loss
2. Support fractional amounts with up to 8 decimal places
3. Format values with currency symbols and thousand separators (e.g., "$ 1,234,567.89")
4. Remove formatting when extracting the numeric value
5. Return string values to preserve precision for amounts exceeding safe JavaScript number limits
6. Set minimum value to 0 (no negative amounts)
7. Allow increments/decrements by 0.01 using step controls

Implementation

@generates

The component should be exported as the default export.

Test Cases

• When a value of "999999999999999999" (18 nines) is entered, the component preserves the exact value without precision loss @test
• When the value is "1234567.89", the displayed format shows "$ 1,234,567.89" @test
• The onChange callback returns string values, not numbers @test
• When the increment button is clicked, the value increases by 0.01 @test

Dependencies { .dependencies }

react { .dependency }

Provides the React library for building user interfaces.

@rc-component/input-number { .dependency }

Provides a numeric input component with high-precision support.