jsillitoe / react-currency-input Goto Github PK
View Code? Open in Web Editor NEWReact component for inputing currency amounts
License: MIT License
React component for inputing currency amounts
License: MIT License
First of all, thank you for this component.
I would like to know if there is a way to get the raw value, as a float number, as in the example:
"$ 1.30" => 1.30
Maybe we could receive this value as the second parameter in the onChange callback function.
If you have multiple inputs, the last one is focused and will not unfocus on Safari (both mobile and web)
Tried many different things, but unable to get anything to work. Any suggestions?
try to install it and use it in react native but it give me this error
Error: Unable to resolve module 'react-dom'
Anyone face this problem, with simple code as present at Readme onChangeEvent does not trigger
onChange event?
handleChange
= (event, value, maskedValue) => {
this.setState({ amount: value })
}
render() {
const { amount } = this.state
return (
<CurrencyInput value={amount} onChange={this.handleChange} />
)
}
`
Hi , it seems that it adds about 600KB to bundle , is it by purpose?
In case if user wants to add digit to input, he has to click twice on it, because first click(focus) selects whole text, which is not really UX-good.
The solution (line 213, handleFocus function):
this.props.selectAllOnFocus && event.target.setSelectionRange(selectionStart, selectionEnd);
I've been searching for a good currency input for React and that's the best I've found in a while. I started using it at some projects and had a great experience, but I couldn't use it recently since that specific project is using React 16.
Is there any interest of the community to do so? What would be needed? I could help if there is demand :)
CurrencyInput: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
I also get this (though I'm not sure if that's the same):
Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
Hello, thanks for this component!
I was wondering if there's a way to add a $ symbol as prefix using this component?
Hi!
I am facing a problem when using currency input with material-ui lib.
Have a look at the code:
Below this part I have others fields in the form.
However, I am not able to fill any other element in the form because the focus always go back to the <CurrencyInput>
input.
Am I missing something?
Tks
I use this component with an onKeyUp
event to trigger an API request. This used to work, but it stopped after this commit: 94e30dd.
This happens because JSON.stringify
cannot serialize functions.
I understand this was a patch to support older environments, but is also broken for other keyboard events.
I see that in one of the last versions you had added the Object.assign
polyfill. In my opinion, this is a better solution to the problem.
You could also have used the spread operator.
let customProps = {...props};
It is also an ES6 feature, but I supposed it is ok to use it here since it is already being used in master.
Anyway, I've downgraded to a previous version to fix my website for now, but I'll be happy to help if you wanna discuss a solution.
Thanks
"peerDependencies": { "prop-types": "^16.0.0", "react": "^16.0.0", "react-dom": "^16.0.0" }
Should also be added as dependencies (https://codingwithspike.wordpress.com/2016/01/21/dealing-with-the-deprecation-of-peerdependencies-in-npm-3/)
Maybe there's a way to do this with the refs but it would by much easier if there was a className prop to allow adding a custom class. How else is everyone styling their inputs?
This is a pretty nice project that you have but I noticed that if you enter more than 16 digits it starts to act extremely weird. I.e. if you do it with the prefix '$' and the value of 12345678901234.56 and then go to add a 7 the number instead is now 123456789012346.00. The behavior is odd.
When entering negative values I would say user exspectation is that you first enter - and then the number. This seems not to be possible right now or I'm missing something. You first have to enter a number and after that you can add the -
I think it would be good to have an option to make it so the input can be required
If the developer enables any mask-related feature - such as prefix, suffix or separators - an input type=number
or tel
would trigger errors, because most of those characters would be invalid in such input types.
If that option is really to be used, at least disclose in the documentation/README that it should not be used together with mask-related attributes.
currently I would like to have a maximum value for my input. As currently we don't support max and min, the work around is to prevent the value to be changed in setState if value > maximumValue.
But, the displayed value is still changed Although the value in state is not changed.
In the package file you list a peer dependency of:
"prop-types": "^16.0.0",
But the current highest version of prop-types is 15.6.1.
Npm throws errors as a result when adding your package.
My implementation is below:
App.js
...
const numberOpts = {
style: 'currency',
currency: 'BRL',
thousandSeparator: '.',
decimalSeparator: ',',
digits: 2,
prefix: '$',
sufix: null,
}
MyComponent.js
handleChangePrice(event, maskedValue, floatValue) {
event.preventDefault()
console.log('handle change price: ', maskedValue, floatValue)
}
<CurrencyInput
className='form-control'
ref='price'
onChangeEvent={this.handleChangePrice}
value={srv.price}
thousandSeparator={this.props.numberOpts.thousandSeparator}
decimalSeparator={this.props.numberOpts.decimalSeparator}
precision={this.props.numberOpts.digits}
prefix={this.props.numberOpts.prefix}
sufix={this.props.numberOpts.sufix}
/>
and the output was:
Uncaught TypeError: this.updater.enqueueCallback is not a function
at CurrencyInput../node_modules/react-currency-input/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState (http://localhost:3000/static/js/bundle.js:53711:18)
at CurrencyInput.handleChange (http://localhost:3000/static/js/bundle.js:36004:18)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:60275:14)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:60314:16)
at Object.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:60171:27)
at Object.invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:60185:43)
What's happening?
When testing my app on (real) mobile phones I noticed the cursor jumps somewhere in the beginning of the string when there are few digits to be formatted.
I saw this in two Android 6.0.1 devices (Sony Z3 Compact, Nexus 5), both running Chrome 57.
On the Sony it happens with SwiftKey and the Xperia Keyboard (default one), but not with the Hacker's Keyboard. On the Nexus the same behavior happened (with the default GBoard in place of Xperia Keyboard).
Example:
<CurrencyInput prefix="R$ " precision={2} allowNegative={false} alowEmpty decimalSeparator="," thousandSeparator="."/>
1234
R$ 4.320,01
By default React passes an event to onChange function โ so you can access the value via event.target.value. Would be nice if this component would follow the same pattern. When you have larger forms it helps to keep code nice and clean if you don't need seperate handlers for every component.
How to reproduce:
# download the package
yarn add react-currency-input
# list it's dependencies
cat node_modules/react-currency-input/package.json | jq '.dependencies'
# output:
{
"react": "^15.5.0",
"react-dom": "^15.5.0",
"prop-types": "^15.5.0"
}
There are two problems here:
react-dom
and prop-types
) should be installed as peer dependencies rather than normal ones. I'm having a problem in which a project I'm working on have two conflicting versions of react
.Uncaught TypeError: this.updater.enqueueCallback is not a function
at CurrencyInput../node_modules/react-currency-input/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState
which is explained in this thread.
I'll be happy to submit a PR in the case you are too busy too make these changes.
Thank you very much for this awesome project, it's been a life saver!
Hey, sorry I don't have more details but had to rollback to from 1.3.2 to 1.2.6 this morning (last known working version). 1.3.2 was causing an infinite loop somewhere in the "handleFocus" function, but only on iphones. It might have been when unfocusing (blurring) the input but I didn't check exactly.
@jsillitoe Have you seen this before?
I badly need the Safari focus fixes, could you please deploy the latest commits in master
to npm?
Thanks!
Typing in the input field seems to alternate as I type between the front and the end of the input.
If I type "123456789" into a box with a value of "$0" in it without moving my cursor or hitting any other buttons, the displayed value is "$9,876,543,102".
If I delete the value completely and then type the same string I get "$987,654,213" (entering into a completely empty input box).
Obviously I have a prefix of '$' and a precision of '0' in this example. The issue arises even without either of those though.
Component is essentially unusable in this state.
If you provide the initial value as the integer 0, it should show the expected mask
0 => "$0.00".
I noticed we have tests covering the case for the string "0" but not for the integer.
I can open a pull request fixing that.
The package.json
currently lists sinon
as a dev dependency, requiring the entire framework to be installed as a part of installing react-currency-input
If a string (or a number, when it works (#6)) is given as value
with not enough decimals when a said precision is needed, some integers are turned into decimals.
Example: <CurrencyInput value="6300" precision="2"/>
yields a field like [63.00]
instead of [6300.00]
.
An easy way to avoid that when receiving numbers is as follows, but string values would require manual work:
if (typeof value == 'number') {
value = Number(value).toLocaleString(undefined, {
style : 'decimal',
minimumFractionDigits: precision,
maximumFractionDigits: precision
})
}
We have a SPA with multipage inputs (one on each page). Lack of tabindex="-1" resulted in users being able to go between pages in mobile safari without any other interactions besides tabbing along.
tabindex
attribute would be a nice to have : )
Thank you!
this package wasn't republished since the last changes.
Upgrade propTypes and createClass
This behavior is happening:
<Currency
ref={currency => { this.currency = currency }}
className={currencyClass}
precision={2}
decimalSeparator=","
value={this.state.value}
thousandSeparator="."
prefix="R$ "
onChange={this.handleValue}
/>
Troubleshooting helper -> console log from react-currency-input/lib/index.js:231
version -> 1.2.6
Google Chrome -> Version 59.0.3071.115 (Official Build) (64-bit)
We're a facing a problem when the component is mounting and it triggers autofocus, on file lib/index.js:210
var selectionEnd = this.theInput.value.length - this.props.suffix.length;
It's causing the following error:
Uncaught TypeError: Cannot read property 'value' of undefined
at CurrencyInput.handleFocus (***)
Hi,
I have a problem where the state is not calculated correct for negative values
I have found that it is the following code in index.js that is the problem
initialValue = Number(initialValue).toLocaleString(undefined, {
style : 'decimal',
minimumFractionDigits: props.precision,
maximumFractionDigits: props.precision
})
The minus sign is change to "โ" (โ2212 MINUS SIGN) instead of "-" (โ002D HYPHEN-MINUS)
This result in that the logic for the following line fails
let negativeSignCount = (value.match(/-/g) || []).length;
Because it is looking for "-" (โ002D HYPHEN-MINUS), and in my case where the char is "โ" (โ2212 MINUS SIGN) negativeSignCount equals 0, instead of 1
The solution should be to change:
initialValue = Number(initialValue).toLocaleString(undefined, {
style : 'decimal',
minimumFractionDigits: props.precision,
maximumFractionDigits: props.precision
})
to
initialValue = Number(initialValue).toFixed(props.precision);
I'm trying to use this component with redux-forms. I've gotten the following snippet below.
<Field name="rate" type="text" id="Rate"
component={props => (
<CurrencyInput
prefix="$"
precision="0"
thousandSeparator=","
value={ props.input.value }
onChange={ props.input.onChange } />)} />
This does seem to render the input text correctly and even renders the initial values passed to it correctly. But on saving the form the value sent to the backend includes all the formatting(i.e. the masked value). What is the preferred way to use this with redux-forms. Perhaps an example of the same would be helpful.
Do i need to update the form onSubmit to use the actual value and not the masked value?
For no apparent (?) reason I started seeing warnings/errors in my console referring to this doc page: Event Pooling. That happened because I was using e.target.name
to define which property of my object I should update, but it started to fail. I work-arounded that using a function that returns a function, scoping the field name instead of relying in the target name
(like onChange: name => (masked, value, e) => [...]
)
It seems that the inner implementation should call event.persist()
somewhere, before passing it down to the handler we specify :)
I have an Input that is rendering with autoFocus=true
. I would like the cursor to appear to the right of the value 0
, but instead it appears at the left. This means that when a user inputs a 1
, the value becomes 10
instead of 1
. If the cursor could be positioned to the right of the initial 0
, this could be avoided.
Any suggestions? Thank you.
when you specify prefix for example "$", CurrencyInput not working and onChange action give you always last 1 character and if you didn't use prefix field at all, CurrencyInput working normal
I use react and react-dom "^15.4.2",
I am getting the following error when trying to use a numeric input.
Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.
My component call looks like this:
<CurrencyInput
name="customerAllocationMicros"
allowNegative
value={(line.customerAllocationMicros / 1000)}
onChangeEvent={this.updateAllocationLine(index)}
disabled={disableControls}
/>
line is part of an array in my state, and updateAllocationLine takes the index to that array and returns a function that will update the correct array member via setState.
Any ideas?
I would like to trigger the focus() event on the when a button is pressed. However, I'm not sure how to do so.
When I use ref={el => this.input = el}
, I don't get access to the component.
Can we expose a way to add a ref
to the component so that we can call focus()
and other triggers? Thank you.
Using version 1.3.6 with React 16.3.2 in Safari, the field starts autofocused. I need it to follow the tabIndex as well, but everytime I type it tries to focus back in the CurrencyInput component.
Any thoughts?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.