Return translation as string

[raoulus]

Hi,

I wanna use this package in combination with https://github.com/nfl/react-helmet to dynamically set localized page titles. The <Helmet /> component only accepts strings... What do you think of exposing a utility function which returns just a string getTranslationAsString? I could imagine that this might useful also for other uses cases.

I can provide a pr, if you think this makes sense.

[raoulus]

As a workaround I am now using counterpart directly to achieve this, but I still think that react-translate-component should facilitate this functionality, in order to use only a single library for translations.

[christoph-peters]

It would be also important to have that function for the placeholder/value parameter in input fields.

[martinandert]

Hi

As a workaround I am now using counterpart directly to achieve this, but I still think that react-translate-component should facilitate this functionality, in order to use only a single library for translations.

The next version will have that functionality. Stay tuned.

It would be also important to have that function for the placeholder/value parameter in input fields.

You can already translate HTML element attribute values by using the attributes prop like this:

<Translate 
  component="input" 
  type="text" 
  attributes={{ placeholder: 'the.key', title: 'other.key' }} 
/>

[micky2be]

What about React props like classNames, style, onKeyDown, ...?
Is there a possibility to use it with a custom Component?

[martinandert]

What about React props like classNames, style, onKeyDown, ...?
Is there a possibility to use it with a custom Component?

Every prop that is not consumed by Translate is passed to the underlying component:

<Translate
  component={MyCustomComponent}
  content="translation.key"
  className="foo"
  onClick={myClickHandler}
/>

[micky2be]

Ok, great.

One more question for the input.
I'm using ref to get the value of my input boxes.
What will be the recommended way using Translate?

[micky2be]

nvm I just needed findDOMNode

[martinandert]

When using a ref, I'd wrap everything in a new component:

class MyTranslatedInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.inputNode.focus();
  }

  render() {
    return (
      <Translate
        component={MyCustomInput}
        content="translation.key"
        ref={(node) => { this.inputNode = node; }}
        onClick={this.focus}
      />
    );
  }
}

[micky2be]

That's what I was doing already. But forgot to add findDOMNode to get the Dom element.

Been trying multiple translate component, and this one is the best so far.

[bigstas]

I wanna use this package in combination with https://github.com/nfl/react-helmet to dynamically set localized page titles. The component only accepts strings... What do you think of exposing a utility function which returns just a string getTranslationAsString? I could imagine that this might useful also for other uses cases.

Bump.
Had this sort of problem with react-joyride, but it turns out that it could take Translate elements where it was supposedly only accepting strings. But now with react-chartjs-v2, the axis labels, chart titles etc. can't be objects, they have to be strings.

As a workaround I am now using counterpart directly to achieve this, but I still think that react-translate-component should facilitate this functionality, in order to use only a single library for translations.

The trouble is, the counterpart.translate method won't update when the locale changes, unlike Translate components, so the axis labels etc. don't change even as the rest of the text on the page (including on buttons, menus etc.) changes.

[bigstas]

Actually some code the owner showed on 18 July 2014 of this issue solves the problem. You have to use counterpart and an event listener for locale changes.