Comments (6)
You mean for the Interpolate Component?!? What you want to render? Could you paste some code snipplet?!?
from react-i18next.
I'am using a Component from the Material-UI framework, which receives a plain text as a secondaryText prop. Just dropping a Text with the Interpolate component with the default span parent breaks it's styling, the p element at least displays it in a block as it should be.
Using the HOC method to translate the text worked like charm before, however I switched to the Interpolate method because I had issues calculating the size of the Element the text is rendered into.
<ListItem
secondaryText={
<Interpolate
parent={'p'}
i18nKey={notification.message.content}
/>
}
>
from react-i18next.
I'm rather sure we allow className on that: https://github.com/i18next/react-i18next/blob/master/src/interpolate.js#L47
think we should do the same for style prop?!? If you like you might add a PR for that to speed new version up...else i will add this asap (but not earlier ;))
from react-i18next.
Ah okay, with this i could create a workaround. However a style prop would be cleaner, at best the parent should be an actual component instead of a plain string.
from react-i18next.
You can pass your own component as parent - but obviously useless right now as no props get passed to it beside the className. For that we would need to remove all props that where used in for the interpolation and pass the rest of the props down to the parent component.
Should be possible...but like said...hard on time so don't expect this to land very soon. PR would be very welcome.
from react-i18next.
style prop will be passed to the interpolate container in next version
from react-i18next.
Related Issues (20)
- Trans component does not respect children w/ apostrophes in nested tags HOT 4
- Changing the language doesn't change the text in react native HOT 5
- Interpolation of the `count` prop doesn't work correctly in the Trans component HOT 2
- Subscribe to onLanguageChange event? HOT 2
- Incorrect call of Backend plugin 'read' method if ns is specified not in useTranslation parameter HOT 5
- [REACT NATIVE] i18n prevents page rendering when I use async-storage HOT 1
- language is not set during tests with vitest HOT 3
- NextJS App Router - avoid prop drilling HOT 3
- vite + vercel "you will need to pass in an i18next instance by using initReactI18next" HOT 2
- 14.0.5 with custom `defaultNS` and ` useSuspense: false` does not work with `i18next-resources-to-backend` HOT 4
- `Trans` context handled differently from `t` function HOT 10
- `context` values resolved differently (and incorrectly) between `<Trans />` and `t(...)` HOT 5
- `Trans` component should NOT modify the input props value. HOT 1
- Less than sign `<` breaks tag parsing with Trans component HOT 1
- 18n.exists() not working properly? HOT 6
- google play console rejected due to java error HOT 7
- i18n.changeLanguage dont work if we setup our app using SSR razzle example in react-i18next HOT 5
- Client translation in NextJS 14 breaks React hooks rules HOT 2
- Argument of getFixedT is ignored HOT 12
- Generated types not working with unescape "- " syntax HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-i18next.