@vinzdf89/react-currency-field v1.5.1

React Currency Field

This package provides a React component with an input field to be used in React projects, where the value directly typed by the user is automatically formatted in the local or in a specific currency format.

1.5.1 patch release notes

• Fixed security issue by updating vite.

1.5.0 minor release notes

• Added new attributes "onMouseDown" and "onFocus" to allow the usage of custom event functions.
• Small optimization: if the value consists of only 1 character, when the input gets the focus the value gets always entirely selected.

Installation

npm i @vinzdf89/react-currency-field

Example

A simple usage of this component would be:

import { useState } from 'react'
import CurrencyField from "@vinzdf89/react-currency-field"

function App() {
    const initialAmount = 5000;

    const [amount, setAmount] = useState<string | number>(initialAmount);
    const [numericalAmount, setNumericalAmount] = useState<number>(initialAmount);

    function changeAmount(e: React.FormEvent<HTMLInputElement>) {
        setAmount(e.currentTarget.value);
    }

    function changeNumericalAmount(newValue: number) {
        setNumericalAmount(newValue);
    }

    return (
        <>
            <CurrencyField value={amount} onChange={changeAmount} onNumericalChange={changeNumericalAmount} />
            <p>String value: {amount}</p>
            <p>Numerical value: {numericalAmount}</p>
        </>
    )
}

export default App;

A more complex example can be found in the App.tsx file from the GitHub project.

Attributes / Properties

Previous releases

1.4.5 patch release notes

• Both numerical and string values are now updated when the value of the "value" attribute is externally modified.

1.4.4 patch release notes

• Fixed the formatting of the value when changing it externally (through the "value" attribute).

1.4.3 patch release notes

• Fixed the wrong positioning and the formatting of the value that was occurring in specific cases.

1.4.2 patch release notes

• Fixed the problem that prevented updating the field value by externally calling the set function for the "numericalValue" attribute.
• "numericalValue" attribute marked as deprecated.

1.4.1 patch release notes

• Fixed the problem that prevented updating the field value by externally calling the set function.

1.4.0 minor release notes

• On blur, the input value is set to zero if empty.
• Automatic symbol positioning logic optimized. Now the symbol position can be changed without graphical issues.

1.3.2 minor release notes

• Optimized the value's formatting when deleting the decimal part. Now the decimal separator is kept until it is explicitly removed.

1.3.1 patch release notes

• Optimized the cursor position for fields using the "numericalValue" attribute instead of "value"

1.3.0 minor release notes

• Optimized the automatic setting of the input's padding where the symbol is placed.
• Added the more generic "disableAutoSymbolPositioning" attribute to use instead of "disableAutoCurrencyPositioning", which is now marked as deprecated.

1.2.1 patch release notes

• Fixed vulnerability from the Babel dependency.

1.2.0 minor release notes

• Automatic symbol positioning optimized for input fields with full width.
• Symbol now cannot be selected so it doesn't interfere with the input field anymore.
• When typing non-allowed characters (such as letters), the cursor will now keep its position.
• If using only "numericalValue" instead of "value" attribute, or if using "value" and passing it a correct formatted string value, the input field will not trigger an additional rendering on initialization anymore (if you don't need to get the formatted value, it's always recommended to use "numericalValue" attribute).
• When deleting the first digit, the rest of the number is now kept in order to not lose it.
• Several other small changes and improvements + a light refactoring of the code.

1.1.0 minor release notes

• Added the more generic "symbol" attribute to use instead of "currency", which is now marked as deprecated.
• Added the new "symbolPosition" attribute, which allows to move the symbol after the field if set to "end" (default is "start").
• Small optimization on keyboard cursor's positioning.
• Code refactoring.