-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use as static methods #41
Comments
can you elaborate more? |
I'm not sure if this is what @klimashkin is asking for, but I've found myself wanting to use the this.formatMessage, this.getIntlMessage, etc... methods from outside of a React component. It seems like we'll need to also include intl-messageformat directly and rebuild much of logic for caching/getting messages that react-intl already does. For instance, when writing a validator for a form which returns error messages, I would want to have my validation logic outside of my component and pass back an internationalized/localized error message that my component could then display. |
Yes, @pselden understood me correctly. Sometimes I need to format message outside of component instance |
You guys can use the |
Does using Our original vision is that we'd build up APIs like |
@ericf Is there any particular advantage of using var Intl = require('intl');
Intl.t('my.string'); // this can be used anywhere This approach would get rid of the mixin and having to pass messages as props. You can also reuse it from anywhere. Yes, it can be built using IntlMessageFormat (ie. a new adapter), but I don't see why you guys have built a mixin instead of providing some generic functionality. |
Yep, intl-messageformat good, but in this way react-intl became redundant in project |
guys, let's not be opinionated here. we do offer:
If none of those 3 options fulfill your needs, just provide more information and we can evaluate what else can we do to help you. |
@deviousdodo We don't plan on extending the built-in Here are the advantages that the React Intl Mixin and upcoming React Intl Components provide over our core
This is not either or, we provide both a set of core libraries and a set of high level integration libraries built on the core. |
@ericf Thank you for the answer! However, it seems my comment wasn't clear enough. When I said var i18n = require('generic-intl-adapter'); // sugar package, just like react-intl, without the react integration
i18n.formatMessage('my.example.message'); // same API as the react component, just without the "this." prefix
i18n.formatNumber(1000, { style : 'currency', currency: 'USD' }); // etc I believe this approach would have the same benefits you outlined above, plus you wouldn't have to propagate the message, formats, etc throughout the react component hierarchy (they would just be added to an i18n object used everywhere) and you wouldn't need to add a mixin to every react component. @caridy Right now we're using |
@deviousdodo Okay I see, that's more clear now. @caridy and I have been debating this. We're trying to determine if we want people to just use the low-level APIs like I've also been investigating how we can support ES6 template strings, as the way to provide a declarative way to format messages in pure JavaScript code. And this is something we'll likely be supporting since the implementation is trivial to do so: var num = 1000;
var msg = formatMessage`{${num}, number, integer} photos`
console.log(msg); // => "1,000 photos" So for now, our answer is use the |
@ericf A Format.js lib would be awesome, both standalone and as the base for the lib adapters (since it would make writing other adapters easier). Thanks again for the detailed reply! |
I'm also struggling with this - is there a way to access the translations outside of the component? Without the mixin? I'm trying get some model validation messages translated that don't live inside a component and couldn't find something in the docs |
@steffenmllr Have you succeeded? I suppose for formating outside component, we can bypass whole react-intl. |
Oh i'm stuck... how i can use it outside component? I need translate message on action creator
|
It's easy. First, you have to realize everything happen in component, at least in app component You will render message on UI sooner or later, directly or with side effects helper. Check Este https://github.com/este/este/blob/master/src/browser/auth/LoginError.react.js |
Not being able to translate messages outside of components is just a pain, I have to move controller code to views just because of that... And for things that do not concern views at all like generating emails, etc... We should definitively be able to translate things outside of components but with the same intl instance as the one used by our components (so that we do not have to provide twice the messages, etc...)... |
@zabojad React Intl builds on a set of core libraries: http://formatjs.io/github/#core |
@ericf I know that. I've tried to used |
Everything goes through import {IntlProvider} from 'react-intl';
const {intl} = new IntlProvider({
locale: 'en',
messages: {},
}, {}).getChildContext();
intl.formatNumber(1000); // "1,000" |
@ericf your solution is work for me. thank you very much. |
@klimashkin, Try https://www.npmjs.com/package/react-intl-universal, it Internationalize React apps not only for React.Component but also for Vanilla JS. It's just the right tool for your question. import intl from 'react-intl-universal';
class App extends React.Component {
render() {
return <div> intl.get('key') </div>
}
} |
If you use React 16, this is now possible simply with a little sugar. The reason it is possible is that React 16 allows you to return text directly from a component now. The difference with FormatMessage is that FormatMessage returns a
Unfortunately, the result is still a React Element. Just without the extra span. |
Hey guys. Its been three years since this issue has been opened. Considering the fact that the current user language is stored in the redux store, have you guys come up with common pratices to vanilla js intl with react-intl ? For example i have this validation library which my file-uploader component uses to validate a given file: const maxSize = (file, size) => {
if (file.size > size) {
return 'File size is bigger than the max allowed';
}
} This is not the whole code, but should i just return a messageId, which makes my client code dependent on react-intl, or should i turn this .js file into a .jsx file and return a We also have the case which a alert message component listens to notification actions emmited by the store. If my component only accepts a message id, i would lose features provided by .catch(() => {
showDangerNotification(<FormattedMessage id="AnErrorOcurred" />);
}); |
@ericf - do you think that creating a function out of your code like this import { FormattedMessage, IntlProvider } from 'react-intl';
import { language, messages } from '../../i18nSetup';
const {intl} = new IntlProvider({locale: language, messages}, {}).getChildContext();
const translate = (id: string, values?: {}) => {
return intl.formatMessage({id}, values);
};
export default translate; and using it all over a react app
would create any performance issues compared with the recommended way |
@adyz : Have you been using your solution, and if so, how does it perform? |
@adyz Any update on the performance of this code? |
this issue is very old, what r you looking for specifically? |
@longlho I have 2 questions. import { createIntl, createIntlCache } from 'react-intl';
const locale = getLocale(); // this is my func
const messages = getMessage(); // this is my func
const cache = createIntlCache();
const intl = createIntl({locale, messages}, cache);
export function formatMessage(message) {
intl.formatMessage(message);
} |
Also, secondly, I know for the class component, we need to call injectIntl() to wrap the class component and preferably I do not want to wrap so many components just to have the access to the props of Intl. So is there any way to being able to use Intl without calling injectIntl()? OR if the solution above is feasible, why don't we just call the custom function created above to use Intl in the class component? I'm guessing this is not possible, otherwise, there wouldn't be so much discussion around InjectIntl() when there is a simple solution like this. Thank you in advance. |
Yes you can do that, we're doing at at Dropbox. |
@longlho Sorry the discussion is kind of everywhere. Yes, I would like to use this custom formatMessage in react class component as well, and it seemed like its working fine. Do you see any potential issue with this approach of creating the util file like above rather than calling InjectIntl() for every class component? |
The discussion is related to #1609 |
@longlho just before closing this old thread and moving to the new one, could you answer the question about the potential issue with using this custom function in class components when you get chance? Thank you so much |
Since |
@longlho sorry i'm a bit confused by 'operate in a runtime where those variables never change'. Why they should not change when you use this approach? We allow users to choose a language on a setting page and we set |
Every time you change locale or messages or config you need to re-create |
Hello!
Is it possible to use format methods in static component methods?
The text was updated successfully, but these errors were encountered: