xdae / react-currency-formatter Goto Github PK

View Code? Open in Web Editor NEW

47.0 3.0 16.0 1.25 MB

💵 react component for currency formatting

Home Page: https://xdae.github.io/react-currency-formatter/

License: MIT License

JavaScript 100.00%

react component currency formatter currency-transformer

react-currency-formatter's Introduction

💵 react currency formatter

Usage

Simple

import Currency from 'react-currency-formatter';

<Currency
  quantity={45685}
  currency="EUR"
/>

Complex

import Currency from 'react-currency-formatter';

<Currency
  quantity={45685}          // Required
  currency="USD"            // Optional (USD by default)
  locale="en_EN"            // Optional
  pattern="##,### !"        // Optional
  decimal=","               // Optional
  group="."                 // Optional
/>

TypeScript

import * as React from 'react'
import * as CurrencyFormatter from 'react-currency-formatter'

type Props = {
	price: number,
	currency: string,
}

const ProductionPrice: React.SFC<Props> = (props: Props) => (
	<CurrencyFormatter quantity={props.price} currency={props.currency} />
)

export default ProductionPrice

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

react-currency-formatter's People

Contributors

Stargazers

Watchers

Forkers

alberto-moreno-sa pastushenkoy misablaha charlieyqin thepembeweb kuraby1389lab monkeymars piotros ezergil soltrinox rollsroyc3 shnoopysol jhorie selivandex

react-currency-formatter's Issues

Not working for arabic locale

I used the following code:

<Currency
                          quantity={45685} // Required
                          currency="AED" // Optional (USD by default)
                          locale="ar_AE" // Optional
                          
                        />

THB Currency

Hi guys,
When i put THB as the currency i got only "B"
for example :<Currency quantity={"100"} currency="THB"/>
will print :100B

is this module only support [email protected]?

Getting this issue when trying to install.

Could not resolve dependency:
peer react@"16.x" from [email protected]
node_modules/react-currency-formatter
  react-currency-formatter@"*" from the root project

Currency acceptance

The Currency only accepts some pre-defined strings.

No group separator

Hi,
Thanks for this useful component,

I would like to format amounts with no group separator, for instance: 258369.78 €

Is it possible with the available props ?
For now when I specify 'group=""', the last group digit before the decimal separator is truncated.

Thanks !

Euro support

Is there a way for me to get the euro symbol infront of the amount? Couldn't fix it using pattern prop: '! ##,###'

what should i do , if i wanna to show a number like 0.00004223

it seems like just have decimals like 0.11
can not show a very small number..

what should i do?
thanks a lot!

Bump peer dependency to react@17

We need to update peer dependency of react to version 17.

export the formater

export a function that return the formatted string instead of a React element.

if i used a zar currency with a ``` pattern="##,### !"``` the currency appear after the number

Chrome displays "Â" in front of "£" where safari displays just the "£"

When I do...

<Currency
  quantity={450.00}
  currency="GBP"
/>

I get the following in Chrome:

Â£450.00

And in safari I get:

£450.00

Any idea why?

Pattern doesn't work with ! at the beginning

There doesn't appear to be a way to get a $ at the beginning of a pattern it blows up with a length exception.

Remove decimals

Hi,

Is there a way to remove the decimal places of a value while still maintaining the pattern for the various currencies (ie. EUR symbol after value)

Thanks

Error in IE11 when used with react-hot-loader

Gettting the following error in IE11 when react-currency-formatter is used with react-hot-loader:

Object.getPrototypeOf: 'this' is not an Object.

It appears that, in IE11, if a non object value is passed into Object.getPrototypeOf('string') it throws an error.

This is used in react-hot-loader here:

function isReactClassInstance(Component) {
  return Component && isReactClass({ prototype: Object.getPrototypeOf(Component) });
}

And as the <Currency /> component seems to return a plain string $1.00, and not markup <span>$1.00</span> it falls over.

create-react-app/webpack failed to minify as module needs to be submitted in ES5 on npm

Trying to run a production build on create-react-app and get the following error:

yarn run v1.3.2
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

 	./node_modules/react-currency-formatter/dist/react-currency-formatter.umd.js:2966

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

create-react-app requires that packages be compiled to ES5 before being submitted to npm

The linked documentation at http://bit.ly/2tRViJ9 says to

Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.

Make it work with css in js

In order to style the component with CSS in JS the component needs to expose a className prop. See https://github.com/emotion-js/emotion/blob/master/docs/styled.md#styling-any-component

Missing types for typescript

I'm using the library with Typescript and the types are missing. Could you add them to https://github.com/DefinitelyTyped/DefinitelyTyped please?

As you have mentioned for typescript it not working would you check out this

As you have mentioned for typescript it not working would you check out this
While resolving: [email protected] 23:47:47.961 | npm ERR! Found: [email protected] 23:47:47.962 | npm ERR! node_modules/react 23:47:47.962 | npm ERR! react@"18.2.0" from the root project 23:47:47.962 | npm ERR! peer react@">=16.8.0" from @dnd-kit/[email protected] peer react@"16.x" from [email protected] 23:47:47.962

Non-existing locale throws: Cannot read property 'h' of undefined

It seems like the package is currently broken:

TypeError: Cannot read property 'h' of undefined
getFormatter @ react-currency-formatter/dist/react-currency-formatter.umd.js:2992:29
format @ react-currency-formatter/dist/react-currency-formatter.umd.js:3161:29
ReactCurrencyFormatter @ /react-currency-formatter/dist/react-currency-formatter.umd.js:3175:10
…

See this CodeSandbox: https://codesandbox.io/s/x675zp55w

Seems to be this line of code, but I cannot make sense of it:

react-currency-formatter/src/main.js

Line 23 in 0d856e0

if (!isUndefined(locale.h)) locale = locales[locale.h]; // Locale inheritance

Option to separete currency and number

I'd like to sepaarete currency and number

Brazil:

today: R$9.156,45

expected R$ 9.156,45

is there any way?