npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ericblade/react-currency-input

v1.4.4

Published

React component for inputting currency amounts

Downloads

2,908

Readme

@ericblade/react-currency-input

Rolling Versions

Modern React component for currency input. Fork from https://github.com/jsillitoe/react-currency-input

Supports custom decimal and thousand separators as well as precision.

Uniquely formats while inputting, including decimal and thousands separators, precision, prefixes and suffixes. I have not found any other currency inputs that do this, and the original hasn't been touched for quite a long time, so that is why I fork this.

Changes since the original

  • Now in TypeScript
  • Supports React 17, 18
  • Totally new automated testing setup with Cypress
  • Automated Testing setup much more thorough
  • Caret selection redone and seems to work everywhere
  • Uses react-device-detect to workaround issues with Gboard

Codepen Demonstrations

There is a CodePen available which you may use to see the component in action, and play with all of it's various parameters to see how it works. It is written with React and TypeScript. Codepen Link

There is a second CodePen, which mirrors the demonstration application in the "examples" directory here in the source: Codepen Link

Pre-fork README below

Changes

v1.3.0

  • Deprecated "onChange" option in favor of "onChangeEvent". This fixes the argument order to better match React's default input handling
  • Updated dependencies to React 15
  • Added parseFloat polyfill
  • Persist events to deal with an issue of event pooling
  • Other bug fixes.

Installation

npm install @ericblade/react-currency-input --save

Integration

You can store the value passed in to the change handler in your state.

import React from 'react'
import CurrencyInput from '@ericblade/react-currency-input';

const MyApp = React.createClass({
    getInitialState(){
        return ({amount: "0.00"});
    },

    handleChange(event, maskedvalue, floatvalue){
        this.setState({amount: maskedvalue});
    },
    render() {
        return (
            <div>
                <CurrencyInput value={this.state.amount} onChangeEvent={this.handleChange}/>
            </div>
        );
    }
});
export default MyApp

You can also assign a reference then access the value using a call to getMaskedValue().

import React from 'react'
import CurrencyInput from '@ericblade/react-currency-input';

const MyApp = React.createClass({
    handleSubmit(event){
        event.preventDefault();
        console.log(this.refs.myinput.getMaskedValue())
    },
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <CurrencyInput ref="myinput" />
            </form>
        );
    }
});
export default MyApp

Separators and Precision

Specify custom decimal and thousand separators:

    // 1.234.567,89
    <CurrencyInput decimalSeparator="," thousandSeparator="." />

Specify a specific precision:

    // 123,456.789
    <CurrencyInput precision="3" />
    // 123,456,789
    <CurrencyInput precision="0" />

Currency

Optionally set a currency symbol as a prefix or suffix

    // $1,234,567.89
    <CurrencyInput prefix="$" />
    // 1,234,567.89 kr
    <CurrencyInput suffix=" kr" />

Negative signs come before the prefix

    // -$20.00
    <CurrencyInput prefix="$" value="-20.00" />

All other attributes are applied to the input element. For example, you can integrate bootstrap styling:

    <CurrencyInput className="form-control" />

Options

Option | Default Value | Description ----------------- | ------------- | ----------------------------------------------------------------------------- value | 0 | The initial currency value onChangeEvent | n/a | Callback function to handle value changes precision | 2 | Number of digits after the decimal separator decimalSeparator | '.' | The decimal separator thousandSeparator | ',' | The thousand separator inputType | "text" | Input field tag type. You may want to use number or tel* allowNegative | false | Allows negative numbers in the input allowEmpty | false | If no value is given, defines if it starts as null (true) or '' (false) selectAllOnFocus | false | Selects all text on focus or does not prefix | '' | Currency prefix suffix | '' | Currency suffix autoFocus | false | Autofocus onClick | none | Passed through to input onFocus | none | Called after internal focus handling onBlur | none | Called after internal blur handling style | none | Passed through to input id | none | Passed through to input tabIndex | none | Passed through to input

*Note: Enabling any mask-related features such as prefix, suffix or separators with an inputType="number" or "tel" could trigger errors. Most of those characters would be invalid in such input types.