Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add React 18 support #66

Open
matttk opened this issue Apr 26, 2022 · 3 comments
Open

Add React 18 support #66

matttk opened this issue Apr 26, 2022 · 3 comments

Comments

@matttk
Copy link

matttk commented Apr 26, 2022

React 18 replaces render with createRoot and root.render. (how to upgrade)

Is there a plan to update django-react-templatetags to support React 18?

@marteinn
Copy link
Member

Hi @matttk! Yes for sure, we just need to find the time to do some proper maintenance :)

For now, the best approach is to override the template https://github.com/Frojd/django-react-templatetags/blob/main/django_react_templatetags/templates/react_print.html

I'm renaming this issue and will have it on top of our todo list when we find the time.

@marteinn marteinn changed the title React 18? Add React 18 support May 13, 2022
@krystofbe
Copy link

for reference: i'm using this snippet right now (without hydration)

{% if components %}
    {% for component in components %}
        {{ component.json_obj|json_script:component.data_identifier }}
        <script>
            const container = document.getElementById('{{ component.identifier }}');
            const root = ReactDOMClient.createRoot(container);
            root.render(
                React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent)),
            );
        </script>
    {% endfor %}
{% endif %}

with these imports

import React from "react";
import ReactDOMClient from "react-dom/client";

@chano195
Copy link

como se integra django-react-templateta a react 18?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants