Currency Input Component

A React component that provides a currency input field accepting formatted monetary values with proper parsing and validation.

Capabilities

Parse Currency Input

Create a currency input component that accepts formatted currency strings and correctly extracts numeric values.

• When a user types "$1,234.56", the component should parse it to the numeric value 1234.56 @test
• When a user types "$ 5,000", the component should parse it to the numeric value 5000 @test
• When a user types "999", the component should parse it to the numeric value 999 @test

Display Formatted Currency

The component should display values in a formatted currency style with dollar signs and thousand separators.

• A value of 1234.56 should be displayed as "$ 1,234.56" @test
• A value of 1000000 should be displayed as "$ 1,000,000" @test

Handle Edge Cases

The component should handle various edge cases gracefully.

• Empty input should result in a null value @test
• Input with only non-numeric characters (like "$$abc") should be handled appropriately @test

Implementation

@generates

Create a React component named CurrencyInput that uses the provided numeric input component to implement the currency parsing and formatting functionality.

The component should:

• Accept and parse various currency input formats (with or without dollar signs, commas, spaces)
• Display values in a standardized currency format: "$ X,XXX.XX"
• Handle decimal precision appropriately for currency (2 decimal places)
• Return numeric values (not strings) in change callbacks

API

import React from 'react';

interface CurrencyInputProps {
  /** Initial value for uncontrolled mode */
  defaultValue?: number;
  /** Controlled value */
  value?: number | null;
  /** Callback fired when value changes */
  onChange?: (value: number | null) => void;
  /** Minimum allowed value */
  min?: number;
  /** Maximum allowed value */
  max?: number;
  /** Whether the input is disabled */
  disabled?: boolean;
}

/**
 * A currency input component that handles formatted monetary values
 * with proper parsing and display formatting.
 */
export declare const CurrencyInput: React.FC<CurrencyInputProps>;

Dependencies { .dependencies }

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

Provides numeric input functionality with formatting and parsing support.

@satisfied-by