Title: Incompatibility with React Last modified: May 11, 2022 --- # Incompatibility with React * Resolved [Matthias Günter](https://wordpress.org/support/users/mguenter/) * (@mguenter) * [4 years, 7 months ago](https://wordpress.org/support/topic/incompatibility-with-react/) * Hey TranslatePress-Team! * More and more plugins are using modern development approaches and frameworks / libraries like React to develop components to their frontend. So, we do also for our plugin “Real Cookie Banner”. Unfortunately, the translation editor of TranslatePress is not fully compatible with React (or the `MutationObserver`). * **How to reproduce?** * 1. Create a new Gutenberg page 2. Create a “Custom HTML” block 3. Insert the following code into the custom HTML block: [https://gist.github.com/matzeeable/5ee88ffbb052720b3f35ea6ac3befc49#file-gutenberg-custom-html-block-html](https://gist.github.com/matzeeable/5ee88ffbb052720b3f35ea6ac3befc49#file-gutenberg-custom-html-block-html) 4. If needed and a console error like `React is undefined` comes up, `wp_enqueue_script(' react')` React within your `functions.php` so React and React DOM gets loaded on your frontend * Afterwards, open the translation editor, and you will see, that you cannot change the text of the React component: [https://i.imgur.com/Kb6FLZo.png](https://i.imgur.com/Kb6FLZo.png) * **Potential solutions** * 1. Make the `MutationObserver` work for React components 2. Provide a `React` component, so we can wrap our texts in translatable strings: * `{text}` * What do you think? - This topic was modified 4 years, 7 months ago by [Matthias Günter](https://wordpress.org/support/users/mguenter/). Reason: Format Viewing 6 replies - 1 through 6 (of 6 total) * [Denis](https://wordpress.org/support/users/sdenis/) * (@sdenis) * [4 years, 6 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15058825) * Hello Matthias, * Thank you for reaching us! * I forwarded this to the development and after their investigation, the conclusion is that MutationObserver does not seem to detect changes made by React as implemented now. However, we have noted your request and will implement it in the future when we have time. * Thank you for your understanding. * Have a great day ahead! Cheers, * Thread Starter [Matthias Günter](https://wordpress.org/support/users/mguenter/) * (@mguenter) * [4 years, 6 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15061243) * Hi again [@sdenis](https://wordpress.org/support/users/sdenis/) ! * This sounds a bit dismissive 🙁 * Is there any alternative we can implement? The translations are all coming from our backend, can we somehow register them to the translation editor and afterwards listen to changes, so we can get it into the live preview? * Thread Starter [Matthias Günter](https://wordpress.org/support/users/mguenter/) * (@mguenter) * [4 years, 6 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15091975) * Hi [@sdenis](https://wordpress.org/support/users/sdenis/) ! * More and more users of our plugin are running into this issue. Isn’t there an alternative so e.g. we can register a string, and it shows up in the translation editor? This would at least allow our users to create translations. 😊 * Plugin Author [Razvan Mocanu](https://wordpress.org/support/users/razvanmo-1/) * (@razvanmo-1) * [4 years, 5 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15158178) * Hi, * Are you are looking towards implementing your own way to replace the original strings with the translation? Do you just need our help to show those strings in TP Translation Editor and later use a server-side TP function to retrieve them? If so, I can assist you. * Like [@sdenis](https://wordpress.org/support/users/sdenis/) said, live detection in the front-end is just not possible for now if you are using React to output them. But if you want to translate your strings on server-side and prepare the translations to be used in front-end, then there is a workaround. * I assume you need translation for user-inputted strings, not for localized (gettext) strings. * ``` /* This code is used to register a string that will be visible in the TP Translation Editor sidebar in the dropdown. Can be placed anywhere inside the tag, such as on the wp_footer hook. Automatic translation will pick them up too, but only if Translation Editor was opened as least once so that these strings got a chance to be registered. */ if ( isset( $_GET['trp-edit-translation'] ) && $_GET['trp-edit-translation'] == 'preview' ){ //$custom_content_1, $custom_content_2 are strings containing just text, no html echo '' . $custom_content_1 .''; echo '' . $custom_content_2 .''; } /* ------------------------------------- */ /* This code needs to be executed on the server-side, when preparing the content to be displayed to the user on the front-end. */ $trp = TRP_Translate_Press::get_trp_instance(); $trp_render = $trp->get_component( 'translation_render' ); // retrieves the translation of any original text in the currently displayed language. $translated_custom_content_1 = $trp_render->translate_page( $custom_content_1 ); $translated_custom_content_2 = $trp_render->translate_page( $custom_content_2 ); ``` * I hope this code can get you started on creating a solution. If you have further questions, perhaps it would be better to write us an [email](https://translatepress.com/support/ask-a-presale-question/). * Thread Starter [Matthias Günter](https://wordpress.org/support/users/mguenter/) * (@mguenter) * [4 years, 5 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15213126) * Hi [@razvanmo-1](https://wordpress.org/support/users/razvanmo-1/) ! * Yeah, your coding could work. But I think about something else: Can I somehow listen to changes in the preview frame of a given translation “ID” so I can refresh the page automatically? I want to provide a “minimal” live preview to our customers? * Have you thought about a native implementation / hook for React? React is coming more and more to WordPress 😊 * Regards, Matthew 😊 * Thread Starter [Matthias Günter](https://wordpress.org/support/users/mguenter/) * (@mguenter) * [4 years, 4 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15259332) * Hi again [@razvanmo-1](https://wordpress.org/support/users/razvanmo-1/) ! * Do you have a workaround for my issue from the previous post with the live preview? 😊 Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Incompatibility with React’ is closed to new replies. * ![](https://ps.w.org/translatepress-multilingual/assets/icon.svg?rev=3166541) * [TranslatePress - Translate Multilingual sites with AI Translation](https://wordpress.org/plugins/translatepress-multilingual/) * [Frequently Asked Questions](https://wordpress.org/plugins/translatepress-multilingual/#faq) * [Support Threads](https://wordpress.org/support/plugin/translatepress-multilingual/) * [Active Topics](https://wordpress.org/support/plugin/translatepress-multilingual/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/translatepress-multilingual/unresolved/) * [Reviews](https://wordpress.org/support/plugin/translatepress-multilingual/reviews/) * 6 replies * 6 participants * Last reply from: [Matthias Günter](https://wordpress.org/support/users/mguenter/) * Last activity: [4 years, 4 months ago](https://wordpress.org/support/topic/incompatibility-with-react/#post-15259332) * Status: resolved