i18next / react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.
https://react.i18next.com
MIT License
9.21k stars 1.02k forks source link

Overriding React component props #1802

Open Jastrzebowski opened 2 days ago

Jastrzebowski commented 2 days ago

Documentation issue

I have an issue with the Trans Component Overriding React component props behaviour. I checked the Trans tests, and there is no test for Overwriting props; once I add one, it's failing. Is it a feature removed from the code but left in the documentation?

For

/**
 * With messages:
 * myKey: 'This is a <CustomLink href="https://example.com/en-EN">link to example.com</CustomLink>.'
 **/  

<Trans
  i18nKey="myKey"
  components={{ 
    CustomLink: <a href="value-to-be-overridden"/> 
    }}
/>

Existing behaviour

This is a <a href="value-to-be-overridden">link to example.com</a>.

Expected behaviour

This is a <a href="https://example.com/en-EN">link to example.com</a>.

Motivation

I want to fix the flows in the documentation and, at best, bring back the props substitution. The use case with links seems valuable, especially when using Routing. However, I can see additional ones, such as using icons as a component.

adrai commented 2 days ago

Here is the test: https://github.com/i18next/react-i18next/blob/badba254ccdd16145f5b0628babaad1efffc8448/test/trans.render.spec.jsx#L106 with this key: https://github.com/i18next/react-i18next/blob/master/test/i18n.js#L44

Jastrzebowski commented 1 day ago

Thank you, @adrai! The test is different than the examples in the documentation with custom components. The corresponding one I was looking at yesterday is: https://github.com/i18next/react-i18next/blob/badba254ccdd16145f5b0628babaad1efffc8448/test/trans.render.spec.jsx#L131

Would that mean the costume tags were never meant to have overwriteable props?

adrai commented 1 day ago

Feel free to provide a PR for that.

jamuhl commented 1 day ago

https://github.com/i18next/react-i18next/blob/badba254ccdd16145f5b0628babaad1efffc8448/test/trans.render.spec.jsx#L91 if the code has no prop it should pick from translation string...

honestly...idk...but setting props from translations is another pandora's box

If I remember right sole reason to introduce this was to allow for some keepBasicHtmlTags that contained links...but not to allow full props replacement (therefore also component props if existing win over translations)