@anyfin/number-formatter
v1.6.0
Published
A Currency, Percentage and Date formatter for anyfin
Downloads
54
Readme
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