@anyfin/number-formatter

number-formatter

A currency and percentage formatting library. Extracted to be used on multiple projects

Usage

yarn add @anyfin/number-formatter

Pure JS/TS usage:

import {
  formatMoney,
  formatPercent,
  formatDate
} from "@anyfin/number-formatter";

const result = formatMoney({ value: 4343.24, currency: "SEK" });
expect(result).toBe("4 343 kr");
const result = formatMoney({ value: 1343.24, currency: "EUR" });
expect(result).toBe("1 343 €");

// ---------

const result = formatPercent({ value: 2343.24, country: "SE" });
expect(result).toBe("2 343 %");
const result = formatPercent({
  value: 222.25611,
  decimals: true,
  country: "FI"
});
expect(result).toBe("222,26 %");

// ---------

const dateToFormat = new Date(2019, 4, 1);
expect(formatDate(dateToFormat, "sv-SE")).toBe("1 maj");
expect(formatDate(dateToFormat, "sv-SE", "ddd MMM YYYY")).toBe("ons maj 2019");

For more examples: Look at the test cases here: __tests__/index.test.js for usage instructions.

Usage with React

Make sure providers are put in at App root.

import {
  CountryProvider,
  CurrencyProvider
} from "@anyfin/number-formatter/dist/components";
const App = () => (
  <CountryProvider>
    <CurrencyProvider>
      <Router />
    </CurrencyProvider>
  </CountryProvider>
);

Actual usage:

import {
  useCurrency,
  useCountry
} from "@anyfin/number-formatter/dist/components";

// Inside the component
const { currency } = useCurrency();
const { country } = useCountry();

...
...

<div>
    {
        formatMoney({ value: 2000, currency })
    }
</div>

...
...
// or

<div>
    <Money value={2000} currency={currency} />
</div>

//or

<div>
    <Money value={2000} /> //Money component knows about the currency set by Provider, hence currency is optional for Money component
</div>

PS: You can use the <Money> and formatMoney directly also without the Providers and the hooks. Only thing you will need to pass country manually

⚛️Using formatDate with i18next

Setup:

i18n
    .init({
      ...,
      ...
      interpolation: {
        format: (value, format, lng) => {
          if (value instanceof Date) {
            return formatDate(value, lng, format);
          }
        },
        ...
      },
      ...
      ...
    });

Usage in component/wherever you use t()

{
  t("description", { myDate: new Date() });
}
{
  t("description2", { myDate: new Date() });
}

In the locale file (where translations live):

    "description": "Hello {{myDate, true}}", <-- This will use default format with current locale (true is needed to be passed)
    "description2": "Hello {{myDate, DD/MM/YYYY}}" <-- This will use DD/MM/YYYY format with current locale