React locales detector

Based on locales-detector library and react context will provide information about user preferred localization.

How to use

Install package:

npm install react-locales-detector

The most basic usage of component load locales from navigator as array of strings.

import * as React from 'react';
import { LocalesProvider, LocalesConsumer } from 'react-locales-detector';

class App extends React.Component {
    render() {
            return (
                <LocalesProvider>
                    <LocalesConsumer>
                        {(locales) => {
                            return `User preferred locales are: ${locales.join(', ')}`;
                        }}
                    </LocalesConsumer>
                </LocalesProvider>
            );
        }
}

You can define your own detectors or transformers to filter/process output. More about detectors and transformers in locales-detector library.

import * as React from 'react';
import { LocalesProvider, LocalesConsumer } from 'react-locales-detector';
import { LanguageOnlyTransformer, NavigatorDetector } from 'locales-detector';

class App extends React.Component {
    render() {
            return (
                <LocalesProvider
                    transformers={[new LanguageOnlyTransformer()]}
                    detectors={[new NavigatorDetector()]}
                >
                    <LocalesConsumer>
                        {(locales) => {
                            return `User preferred locales are: ${locales.join(', ')}`;
                        }}
                    </LocalesConsumer>
                </LocalesProvider>
            );
        }
}