search

martinandert / react-translate-component

A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.
MIT License
322 stars 31 forks source link

How to translate placeholder attribute in input element #22

Closed mslosarz closed 8 years ago

mslosarz commented 8 years ago

I have an input element like this one: <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required/>

I've tried to translate it in this way: <Translate component="input" type="email" id="inputEmail" className="form-control" placeholder="login_page.email_address" required/>

In result I expected to have translated placeholder, but I've got: <input type="email" id="inputEmail" class="form-control" placeholder="login_page.email_address" required="">

What am I doing wrong?

martinandert commented 8 years ago

@mslosarz It's not clearly documented in the README, sorry. Regarding the translation of attributes, the README simply points to the specs. Here's how you'd do it:

<Translate component="input" type="email" id="inputEmail" className="form-control"
  attributes={{ placeholder: "login_page.email_address" }}
  required
/>

See also #14.

mslosarz commented 8 years ago

I've found how to do it on my own (I've analyzed spec.js). This library is great, but it'll greatest if in README or in demo will be example of use with common html attribute (alt for images / placeholders for input etc. :) Thanks for quick response.

LacTuanMinh commented 2 years ago

@mslosarz It's not clearly documented in the README, sorry. Regarding the translation of attributes, the README simply points to the specs. Here's how you'd do it:

<Translate component="input" type="email" id="inputEmail" className="form-control"
  attributes={{ placeholder: "login_page.email_address" }}
  required
/>

See also #14.

Perfect answer, save my day. Thank you