How to use Ant Design LocaleProvider with React-Boilerplate

Question

We have started using this React-Boilerplate . Also we are trying to integrate Ant Design for it's awesome components .

From the docs of Ant Design I have created a wrapper around AppWrapper of React-boilerplate like this -

import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US'; 
return ( 
<LocaleProvider locale={enUS}> 
<AppWrapper> 
...
</AppWrapper>
</LocaleProvider> 
);

And it's working perfect for antd components.

I wanted to know how can I use this with i18n of react-boilerplate . Or if this above way is a correct way of doing this ?

Answer 1

for me this worked as localprovider deprecated and configprovider is replaced with

Changes done in below piece of code

1. Week should start with Monday

2. day changed from Mo to M

   import { Calendar, ConfigProvider } from 'antd'; import en_GB from 'antd/lib/locale-provider/en_GB'; import moment from 'moment'; import 'moment/locale/en-gb'; import React from 'react'; import './scheduler.scss';

    const Scheduler = () => {
   
      moment.locale('en-gb');  // important!
      moment.updateLocale('en', {
        weekdaysMin: ["M", "T", "W", "T", "F", "S", "S"]
      });
   
      return (
        <div class='scheduler-dashboard'>
          <ConfigProvider locale={en_GB}>
            <Calendar
            />
          </ConfigProvider >
        </div>
      );
    };
   
    export default Scheduler;
   

Answer 2

This is in general the correct way of using LocaleProvider, yes, but...

You do have to be a careful when mixing an i18n librarys wrapper with antd's LocaleProvider, if you want language changes to propagate to both.

In the case of React-Boilerplate the locale is stored in Redux. For antd to be able to update locale when the app does, <LocaleProvider> must be inserted inside the Redux provider, otherwise it will not have access to the locale state.

So your app.js needs to become something like:

<Provider store={store}>
    <LanguageProvider messages={messages}>
        <LocaleProvider locale={...}>
            <Router ... />
        </LocaleProvider>
    </LanguageProvider>
</Provider>,

Unfortunately this is not enough, since antd's LocaleProvider does not take a simple locale id string as its argument, but rather an object with the locale info itself.

This means that it is not possible to just insert <LocaleProvider> in the wrapper chain as above. You must create you own component that takes the connects to the Redux locale prop and feeds <LocaleProvider> with the correct locale object based on the string id from Redux.

Here is some (untested) code that I ripped out of a project with a similar structure and adapted to Intl (it was using i18next instead of Intl). Should give you an idea of one way to do it.

import React from 'react';
import { Router } from 'react-router';
import { Provider, connect } from 'react-redux';
import en_US from 'antd/lib/locale-provider/en_US';
import sv_SE from 'antd/lib/locale-provider/sv_SE';
import { LocaleProvidern } from 'antd';

class AntDesignPlusRouter extends React.Component {
    state = {
        antd_locale: en_US
    }

    componentWillUpdate( next ) {
        let { locale } = next
        if( !locale || locale === this.props.locale ) return;

        switch( locale ) {
            case 'sv':
                this.setState( { antd_locale: sv_SE } );
                break;
            default:
            case 'en':
                this.setState( { antd_locale: en_US } );
                break;
        }
    }

    render() {
        return (
            <LocaleProvider locale={this.state.antd_locale}>
                <Router {...this.props} />
            </LocaleProvider>
        )
    }
}

const WrappedAntDesignPlusRouter = connect(
        function mapStateToProps( state ) {
            return {
                locale: state.locale
            }
        },
        function mapDispatchToProps( dispatch ) {
            return {}
        }
)( AntDesignPlusRouter );



class App extends React.Component {
    render() {
        return (
                <Provider ...>
                    <LanguageProvider ...>
                        <WrappedAntDesignPlusRouter/>
                    </LanguageProvider >
                </Provider>
        );
    }
}