react django

gistfile1.txt

{# react_component.html #}
{% comment %}
Template for a custom template tag for a React component. Includes the jQuery DOM ready call

Props:
- id
- js_mount_callback_name that takes a jquery selector and mounts the component

{% endcomment %}



<div id="{{ component_id }}"></div>

<script>
  $(function () {
  try {
  {{ js_mount_callback_name}} && {{ js_mount_callback_name }}('{{ component_id }}');
  } catch (e) {
  }
  {% if debug %}
  console.log("Mounted", "{{ component_id}}", "using", "{{js_mount_callback_name}}");
  {% endif %}

  });
</script>


{# react_component.html #}from django import template
from uuid import uuid4

register = template.Library()

@register.inclusion_tag('components/react_component.html')
def react_component(js_mount_callback_name, component_id=None, debug=False):
    if component_id is None:
        component_id = str(uuid4())
    return {"component_id": component_id, "js_mount_callback_name": js_mount_callback_name, "debug": debug}


usage:

{% react_component "window.BillingPaymentTopAlertComponent.mounterFn" %}