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 ?

Jesper We · Answer 1 · 2017-05-22T12:04:11.610

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>
        );
    }
}

score 1 · Answer 2 · answered Apr 19 '21 at 04:55

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

Changes done in below piece of code

Week should start with Monday

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;

How to use Ant Design LocaleProvider with React-Boilerplate

2 Answers2