Hi, I will start the helpers' functions series to make life easier from project to project. The number! Sometimes we need to render a number as currency or an integer or put your style here. So, in general, we use some toFixed(num) for this and then we can play with string concatenation to achieve this and it could be tricky as hell. The cool thing is to use the Intl object, it basically solves all the issues we can probably have with numbers on the screen.

export type FormatNumberType = (num: number, fraction?: number, currency?: string | null) => string;

export const formatNumber: FormatNumberType = (num, fraction = 2, currency = null) => {
    const value = +num < 0 ? num * -1 : num; // can be solved with Intl, I prefere manual
    const options: IntlOptions = {
        maximumFractionDigits: fraction,
        minimumFractionDigits: 0,
        trailingZeroDisplay: 'lessPrecision', // remove trailing 0
    };
    if (currency) {
        options.style = 'currency';
        options.currency = currency.toUpperCase();
    }
    return new Intl.NumberFormat('en-US', options).format(value);
};

Few words. This is just an example of my small case. But, the locale can be passed within the function argument and the sign can be done on the Intl side.

Usage (React, MUI 5.x, TS)

<Typography variant="p14" color="common.white">
    {formatNumber(+value, 5, 'usd')}
</Typography>

Check up Intl docs here