Adding localization to Material-UI

[nahue]

I used react-translate-component and counterpart modules to enable this. If you take a look at master.jsx (from docs module). There are a few simple steps to enable it:

• Add LocaleManager as a dependency
• Add LocaleManager.setLocale('en');
• Add 'muiLocale: LocaleManager.getLocale()' to getChildContext()
• Add 'muiLocale: React.PropTypes.string' to Master.childContextTypes

if you change setLocale to 'es'.. the datepicker will be in spanish (used that for testing)

locales are available in /src/locales/es.js and en.js (file structure needs work)

Let me know if this works for you!

Material-UI is awesome thanks for the hard work!

[oliviertassinari]

What do you think about #1658?

[nahue]

Using momentjs is a good idea.. but i dont like the way of passing locale for each component.. i guess is better to set the locale in the root component's context.

Unless you want to set different locale for each component.. but i dont think so :)

Let me know if i can collaborate with other people.. maybe incorporate my approach into someone else's.

[oliviertassinari]

I agree with you. Having the locale in the context sounds like a good idea.

For me, the drawback of using momentjs or your approach vs the standardized Intl, is the size of the output you send to the user.
You will probably format date and number outside the material-ui component if you are building a SPA. You don't want the user to load locales twice or more (two 'en' for instance or 'en' and 'es' when they just use 'es')

[nahue]

Agree. Maybe i could try using react-intl instead of hardcoding locales (seems that this library already manages dates and other strings). Want me to give it a try?

[oliviertassinari]

@nahue I'm not really sure about adding a dependency to this project.
I think it's better to no to it if we can, react-intl is a simple wrapper about Intl, so I think we can save it.

What do you think about adding a locale and a IntlDateFormater in the context? So that, I can rebase my #1658 PR to use it instead of passing property all the way down to the components that need it?

[nahue]

Would be nice! im working on a project and i really need i18n on mui components.. @oliviertassinari let me know if you need help!

[tlvenn]

@oliviertassinari , react-intl is much more than a simple wrapper around intl. It's react components on top of http://formatjs.io/ which is built on top of intl. There is a lot of add value provided by FormatJS, thanks to Yahoo hard work.

[nahue]

Any progress on this matter?

[oliviertassinari]

@nahue Another PR was merged to adress the Intl support of the DatePicker: #1658.
Feel free to open a new PR if some feature are missing.
Thanks for bringing up the topic.