This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

input-currency-field
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

Input currency field

⚡️ Live demo

Helpers for currency input

Install

npm install input-currency-field

Use

import currencyField from 'input-currency-field'

const onChangeHandler = (event) => {
  const value = event.target.value
  if (value === null || value.length < 1) {
    return
  }
  // fill in config with possible options
  const config = {
    decimalSymbol: ',',
    allowedDecimalSymbols: ',.;',
    postfix: ' $',
    thousandsSeparator: ' ',
  }
  // apply mask/config to value
  const displayValue = currencyField.format(value, config)
  // calculate next caret/cursor position
  const nextCaretPosition = currencyField.getNextCaretPosition({
    value,
    displayValue,
    postfix: config.postfix,
    caretPosition: event.target.selectionStart,
  })
  // get math-ready value
  const mathValue = currencyField.parse(displayValue, config)

  // update DOM
  event.target.value = displayValue
  currencyField.setNextCaretPosition(event.target, nextCaretPosition)
  document.getElementById('realValue').value = mathValue
}

document.getElementById('currency').addEventListener('input', onChangeHandler)

Many npm libs cannot, but this js could use custom

  • decimal symbol (even range of them)
  • postfix
  • thousand separator
  • onChange event. Use your own! Separating displayValue and value with no problem

⚠️ Before you copy and paste into prod

  • onChangeHandler should be debounced or throttled

📚 MDN

Dependencies (0)

    Dev Dependencies (1)

    Package Sidebar

    Install

    npm i input-currency-field

    Weekly Downloads

    6

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    23

    Last publish

    Collaborators

    • loopreport