How to use Ant Design LocaleProvider with React-Boilerplate - reactjs

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

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

Answer 2

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;