How do I determine the decimal and thousands separator for the current locale in the browser?

Question

We are using react with react-intl and need to write our own custom input fields for reasons. While it is possible to pass in a number to the react-intl API and get the number back properly formatted, how can we find out the current locale characters for things like thousand separators and decimal points?

Answer 1

You can access the Intl.NumberFormatter's formatToParts method on react-intl's injected intl object.

import React, { Component } from 'react';
import { injectIntl, intlShape } from 'react-intl';

class MyComponent extends Component {
    static propTypes = {
        intl: intlShape.isRequired,
    };

    render() {
        const parts = this.props.intl.formatters
            .getNumberFormat(this.props.intl.locale)
            .formatToParts(9999.99);

        return (
            <div>
                <div>
                    Decimal point:
                    {parts.find(i => i.type === 'decimal').value}
                </div>
                <div>
                    Thousands separator:
                    {parts.find(i => i.type === 'group').value}
                </div>
            </div>
        );
    }
}

export default injectIntl(MyComponent);

While this isn't as clean a solution as I'd like, it's the best I've found so far, and at least you're not guessing what parts of a number each character is part of.