Is there a way to access the current language using React-Intl?
I was wondering if there is any way to access what is currently set in the locale using React-Intl?
Let's say I create this:
render() {
return (
<IntlProvider locale="en">
<App>
</IntlProvider>
);
}
In an application, I would like to do something like this in order to access the language that I passed to IntlProvider
this.props.locale
Is there a way to do something like this?
Thank.
source to share
You can get the current locale in any component of your application simply by accessing it from the React Intl "injection API":
import {injectIntl, intlShape} from 'react-intl';
const propTypes = {
intl: intlShape.isRequired,
};
const MyComponent = ({intl}) => (
<div>{`Current locale: ${intl.locale}`}</div>
);
MyComponent.propTypes = propTypes
export default injectIntl(MyComponent);
source to share
Yes, if you want to access the current language in any child component, the best way is to read the context, because the IntlProvider provides the context. Define in your application or any other component the context you want to access:
App.contextTypes = {
intl: PropTypes.object
};
Now you can read the current locale in your component, for example:
render() {
return (
<div>{this.context.intl.locale}</div>
)
}
source to share