Better Document Trans Component

Right now it is very unclear which index is needed to reference children and why sometimes nested interpolation-indexes are needed (<0><1>...</1></0>).

It is also not documented how interpolation using {{value}} works and how value names are resolved.

[yoagauthier]

As a farly new user of react-i18next, I’m puzzeled about a few things that maybe the documentation should detail :

• the un-natural look of my JSX code regarding to what’s outputed : <Trans i18nKey="terms">I accept <Button> Terms & Conditions </Button></Trans> JSON : "terms": "I accept <1> Terms & Conditions </1>" and <Trans i18nKey="terms">I love <Button> Pizza </Button></Trans> JSON : "terms": "I accept <1> Terms & Conditions </1>" output the same things. You detailed the reasons in #271 but I think it’s not clear to a new user. What about suggesting a syntax in the docs like : <Trans i18nKey="termAcceptance">#<Button>#</Button></Trans> For me the syntax of the Interpolate component is clearer, but JSX does not allow to pass opening tags or closing tags alone as props.

• what’s the best workflow to produce my JSON with the interpolation indexes ? Set the Trans tag, then testing my app, then copy / pasting the generated output ? This, does not seems optimal, is there any way of guessing the generated output if I want to save time ?

[jeremyboles]

It would great too to see some documentation on using the component with React Native too. Right now it is unclear of the component is even supported there.