Nylon Pendulum Movement

    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

    Install

    npm i input-currency-field

    DownloadsWeekly Downloads

    0

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    23

    Last publish

    Collaborators

    • loopreport