Comments (10)
Just wanted to say it's exciting to see the potential for this feature!
from react-localize-redux.
Yea I will have to give that some thought. Right now any HTML is rendered by using React's dangerouslySetInnerHTML prop.
In order to accomplish something like this you'd need something to convert a string version of JSX, and have that converted to fully rendered React component with props and state. I'm pretty sure there is no out of the box way to accomplish this at runtime. There may be a way to do it during a bundling step, and have it somehow run the translation string through the babel JSX transform for example.
Anyways as I mentioned this will require some thought, but if you have any ideas on how this might be accomplished feel free to send my way.
from react-localize-redux.
Yes I agree this would be complicated. There is this library that converts HTML to a React tree https://github.com/aknuds1/html-to-react. However, this could quickly turn your tidy localize library into a monolith like some other localization libraries.
from react-localize-redux.
To make things a little simpler you could potentially expose your translation rendering so that a custom renderer could be used. Then a plugin could be made that uses https://github.com/aknuds1/html-to-react.
That way all the work is not on you to maintaining that complicated piece.
from react-localize-redux.
I have done a draft implementation of how I think this could be achieved without any major breaking changes*.
https://github.com/thchia/react-localize-redux/tree/data-component
The basic idea is that you can pass a React Component to data
like so:
const StrongName = ({ name }) => <strong>{name}</strong>
const translations = {
greeting: 'Hello ${name}'
}
...
<Translate id='greeting' data={{ name: <StrongName name='Ryan' /> }} />
This is achieved by converting the templater
function to return a string if there are no React components in data
(like normal). If there are React components, it returns an array representation of the string to be translated, like:
[ 'Hello ', <StrongName /* ...props */ />]
Then in getLocalizedElement
, if the result form templater
is a string, perform the usual conversion to dangerouslySetInnerHTML
. Otherwise, return
React.createElement('span', null, ...arrayFromTemplater)
* One problem I have not been able to solve is that if you want to use React components as arguments, you cannot have html in the translation. This is because the new templater
will return something like this:
[ '<p>Hello ', <Component />, '</p>' ]
Which cannot be converted to innerHTML
since it is a mixture of string literal HTML and React components.
Willing to discuss further if this looks like something you would consider supporting @ryandrewjohnson.
from react-localize-redux.
@thchia thanks for putting this together. Unfortunately I don't have much bandwidth to look into your solution, as what little time I do have right now is going towards getting v3 #67 ready. Once that is published I'll have some time to take a closer look at this. In the meantime maybe have a look at v3, as there are some significant changes that would most likely impact this implementation.
from react-localize-redux.
No worries, it's a fairly rough implementation anyway. In the meantime I will take a look at v3 and try to do a similar thing there.
Edit: The only things I changed were templater
and getLocalizedElement
anyway so I have hope for v3 😃
from react-localize-redux.
@thchia I've officially added you as a collaborator. Thanks for all your help, and feel free to assign any issues you want to work on to yourself.
from react-localize-redux.
Tracking this in #100
from react-localize-redux.
Added in #100 and published in v3.2.0
. Thanks for the create work on this one @thchia.
from react-localize-redux.
Related Issues (20)
- translate function not returning proper type [with CodeSandBox example]
- Translation returns [Object object]
- LocalizeContext not declared in types declaration despite being exported HOT 2
- onMissingTranslation for multiple translations HOT 1
- Translating external components HOT 1
- Falling back to a translation that has html in it causes a crash
- Unit test for the Translate Component in Demo HOT 1
- [Bug] onMissingTranslation is a non-serializable value HOT 1
- Translate component not working with options { defaultLanguage: "XX" }
- License issue with dependency: create-react-context ^0.2.2 (resolves to 0.2.3) HOT 1
- Denial of Service Node Fetch HOT 1
- Fallback option for default language when using translate() function
- Performance with big translation file HOT 1
- Getting value to populate to render block without triggering warning
- Import "InitializePayload" fails in esbuild (e.g. when using Vite) HOT 3
- Update react peer dependency HOT 4
- Type mismatch when using redux toolkit with Typescript
- Vulnerabilities in the latest react-localize-redux HOT 8
- Localize.on "initialize" never fires
- This package is dead, replacement?
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-localize-redux.