Last active
August 29, 2015 14:02
-
-
Save ustun/7b5d2fffa77aa63c24bf to your computer and use it in GitHub Desktop.
react django
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# 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" %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment