How to translate an attribute?

[AlSayedGamal]

<input placeholder="what's up ?" />

I only want to localize the "what's up ?" value.

[martinandert]

@AlSayedGamal Please take a look at the specs: https://github.com/martinandert/react-translate-component/blob/master/spec.js#L71-L92

For your example, it basically goes down to something like this:

<Translate component="input" attributes={{ placeholder: 'scope.key' }} />

[bodrin]

and react ref attribute does not work anymore?

I'm wondering if there is another way .. could I instead translate the attribute before (like using _t)? ... Otherwise what if all my markup becomes <Translate... seems not very readable to me?

Thanks for this library!

[bodrin]

and react ref attribute does not work anymore?

works with findDOMNode :

render() { ... <Translate component="input" attributes={{ placeholder: 'Login.label.email', }} type="email" id="inputEmail" className="form-control" ref="emailRef" autofocus/> ... } ` var emailNode = ReactDOM.findDOMNode(this.refs.emailRef);`

[martinandert]

@bodrin The convenience method (_t) also works with attributes. Commit ec4accb7d7bfa73e37fa4ab6cbd1c4d994596067 extends a spec example to make sure that it translates attributes correctly.

[bodrin]

@martinandert _t does not work for me : if I use this <input type="password" id="inputPassword" className="form-control" placeholder={_t("Login.label.pass")} ref="passwordRef" />

I get for the placeholder : "[object Object]"

"react-translate-component": "^0.10.0",
"counterpart": "^0.17.2",
"react": "^0.14.7",

[martinandert]

@bodrin You can't do it like this. Try the following instead:

<Translate 
  component="input" 
  type="password" 
  id="inputPassword"
  className="form-control"
  attributes={{ placeholder: "Login.label.pass" }}
  ref="passwordRef"
/>

In order to make this more readable, use composition:

var PasswordInput = React.createClass({
  render: function() {
    return (
      <Translate ... {...this.props} ... />
    );
  }
});

The _t convenience method returns a React element. If you just want to translate a raw string, do it like this:

var translator = require("counterpart");
translator.translate("my.key", { my: opts })

[bodrin]

@martinandert 10x! (I thought _t can be used in attributes) So the above works but you no longer can change it dynamically (without react components re-rendering).

Now I understand that in react-translate-component you can somehow update the translations dynamically (on counterpart.setLocale(...)) without re-rendering react components (through react context), right? .. can you point me to docs or code, 10q. I'm sorry to ask you stupid questions in this issue thread (i know it is not appropriate - i will move it somewhere if you suggest) but:

I think that I could make LanguageSwitcher to update the locale in flux/redux store and on update all react components to be re-rendered. Is this stupid? What do you think?

In any way - thank you very much for this library!