Translate Utility func

[ryandrewjohnson]

Translate Utility func

[ryandrewjohnson]

First off thanks for the kind words. Now in regards to your issue, if I'm understanding you correctly, the translate function you describe actually already exists.

In order to get access to the translate function you have a few options:

Use Translate's render props API - see Flavour 2 example in getting started docs:

<Translate>
  {translate =>  
     <input htmlSize="32" label="" name="email" type="email" placeholder={ translate("placeholder1") }/>
  }
</Translate>

You can also access the translate function directly in connected components. Again see the Add translations to components in the getting started section of the docs. It's the last example after Translate's render props stuff.

[meta-chris]

Aha yes, thank you! This approach solved all of my issues.

//react-localize-redux init
store.dispatch(initialize(languages, {missingTranslationMsg:null}));
...
//my translated component
<Translate>
  {translate =>  
    <SimpleForm id="startForm" onChange={this.onChange}  onSubmit={this.formSubmit} submitLabel={translate("cta") || "Get a Demo"}>
      <Input htmlSize="32" label="" name="email" type="email" placeholder={ translate("placeholder1") || "Email Address" }/>
    </SimpleForm>
  }
</Translate>

Using Flavour 2 allows me to use React Components as children, and setting the missingTranslationMsg option to null allows me to keep the default lang values in the render function.

Thanks again!

[ryandrewjohnson]

Nice! I like this syntax translate("placeholder1") || "Email Address" for keeping the default language while using translate - should probably add it to the docs.

Going to consider this issue closed.