Repository navigation
Would appreciate more detailed documentation for <Localized> #571
Description
I would appreciate some documentation for <Localized> that goes more into specifics. I'm reading https://github.com/projectfluent/fluent.js/wiki/Localized but it's not really answering most of my questions:
- How deep does the replacement magic go? Obviously
<Localized>Some string</Localized>works, and so does<Localized><div>Some string</div></Localized>, but how deep does it go? - Which part of the react children gets replaced by the localized contents? Does it only replace raw strings, and are all "element" descendants preserved, or can it happen that an element descendant gets "localized away"?
- What happens if I have multiple raw strings inside the
<Localized>contents, in different descendant elements? - Can
<Localized>components be nested? What happens if I nest them?
Activity
mstange commentedon Aug 5, 2021
zbraniecki commentedon Aug 5, 2021
@stasm @gregtatum @eemeli - can you help here?
mstange commentedon Aug 5, 2021
It would also be great to see some more complex examples involving
vars. For example, can vars only take strings, or could I also dovars={{pref: <code>myprefname</code>}}, i.e. give it a react element? And if so, what would the type annotation in the comment in the ftl file look like?stasm commentedon Aug 10, 2021
All great questions, @mstange. I don't have the capacity to edit the docs, but if someone is up for doing it based on the implementation, I'll be happy to support that effort by review a PR.
eemeli commentedon Aug 12, 2021
The replacements only apply to the immediate child, i.e. no deeper than the examples you give.
This depends on the value and attributes of the message that's referred to by the
idprop. If it has a value, then the children of the immediate child of the<Localized>component are entirely replaced by that message value. If the message has attributes, then theattrsprop controls which of those are applied as props of the immediate child component.If the message has a value, then they'll all be replaced. If it only has attributes and you use the
attrsprop, they'll be applied to the immediate child on the<Localized>component.Sure, there's nothing preventing this. With the proviso that if any of the outer components refer to a message that has a non-empty value, all of its inner components will not be rendered.
They do not have any particular meaning in a programmatic sense, so that you're free to use a fallback message that makes sense for your context.
mstange commentedon Aug 12, 2021
Thank you! That's very helpful.