From a9214be1bfd75d1c784fa06255044dedb2dc05fb Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Mon, 2 Dec 2024 09:34:06 +0000
Subject: [PATCH] Deployed a85164c to develop with MkDocs 1.6.1 and mike 2.1.3

---
 develop/about/changelog/index.html            |   2 +-
 develop/about/contributing/index.html         |   2 +-
 .../index.html                                |  26 +--
 develop/learn/your-first-component/index.html |   6 +-
 develop/reference/components/index.html       | 154 ++++++-------
 develop/reference/decorators/index.html       |  14 +-
 develop/reference/hooks/index.html            | 210 ++++++++++--------
 develop/reference/html/index.html             |   6 +-
 develop/reference/router/index.html           |   8 +-
 develop/reference/settings/index.html         |   2 +-
 develop/reference/template-tag/index.html     |  34 ++-
 develop/reference/utils/index.html            |  32 +--
 develop/search/search_index.json              |   2 +-
 develop/sitemap.xml                           |  30 +--
 develop/sitemap.xml.gz                        | Bin 351 -> 351 bytes
 15 files changed, 275 insertions(+), 253 deletions(-)

diff --git a/develop/about/changelog/index.html b/develop/about/changelog/index.html
index 26a8d7c0..39941cdf 100644
--- a/develop/about/changelog/index.html
+++ b/develop/about/changelog/index.html
@@ -2,7 +2,7 @@
 
 If you see this page, you probably meant to visit the other CHANGELOG.md (all caps).
 
---> <p class=intro> The format is based on <a href=https://keepachangelog.com/en/1.0.0/ >Keep a Changelog</a>, and this project adheres to <a href=https://semver.org/spec/v2.0.0.html>Semantic Versioning</a>. </p> <hr> <h2 id=unreleased><a href=https://github.com/reactive-python/reactpy-django/compare/5.1.0...HEAD>Unreleased</a><a class=headerlink href=#unreleased title="Permanent link">&para;</a></h2> <h3 id=fixed>Fixed<a class=headerlink href=#fixed title="Permanent link">&para;</a></h3> <ul> <li>Fixed regression in v5.1.0 where components would sometimes not output debug messages when <code>settings.py:DEBUG</code> is enabled.</li> </ul> <h3 id=changed>Changed<a class=headerlink href=#changed title="Permanent link">&para;</a></h3> <ul> <li>Set upper limit on ReactPy version to <code>&lt;2.0.0</code>.</li> </ul> <h2 id=510-2024-11-24><a href=https://github.com/reactive-python/reactpy-django/compare/5.0.0...5.1.0>5.1.0</a> - 2024-11-24<a class=headerlink href=#510-2024-11-24 title="Permanent link">&para;</a></h2> <h3 id=added>Added<a class=headerlink href=#added title="Permanent link">&para;</a></h3> <ul> <li><code>settings.py:REACTPY_ASYNC_RENDERING</code> to enable asynchronous rendering of components.</li> </ul> <h3 id=changed_1>Changed<a class=headerlink href=#changed_1 title="Permanent link">&para;</a></h3> <ul> <li>Bumped the minimum ReactPy version to <code>1.1.0</code>.</li> </ul> <h2 id=500-2024-10-22><a href=https://github.com/reactive-python/reactpy-django/compare/4.0.0...5.0.0>5.0.0</a> - 2024-10-22<a class=headerlink href=#500-2024-10-22 title="Permanent link">&para;</a></h2> <h3 id=changed_2>Changed<a class=headerlink href=#changed_2 title="Permanent link">&para;</a></h3> <ul> <li>Now using ReactPy-Router v1 for URL routing, which comes with a slightly different API than before.</li> <li>Removed dependency on <code>aiofile</code>.</li> </ul> <h3 id=removed>Removed<a class=headerlink href=#removed title="Permanent link">&para;</a></h3> <ul> <li>Removed the following <strong>deprecated</strong> features:<ul> <li>The <code>compatibility</code> argument on <code>reactpy_django.components.view_to_component</code></li> <li><code>reactpy_django.components.view_to_component</code> <strong>usage as a decorator</strong></li> <li><code>reactpy_django.decorators.auth_required</code></li> <li><code>reactpy_django.REACTPY_WEBSOCKET_PATH</code></li> <li><code>settings.py:REACTPY_WEBSOCKET_URL</code></li> </ul> </li> </ul> <h2 id=400-2024-06-22><a href=https://github.com/reactive-python/reactpy-django/compare/3.8.1...4.0.0>4.0.0</a> - 2024-06-22<a class=headerlink href=#400-2024-06-22 title="Permanent link">&para;</a></h2> <h3 id=added_1>Added<a class=headerlink href=#added_1 title="Permanent link">&para;</a></h3> <ul> <li>Client-side Python components can now be rendered via the new <code>{% pyscript_component %}</code> template tag<ul> <li>You must first call the <code>{% pyscript_setup %}</code> template tag to load PyScript dependencies</li> </ul> </li> <li>Client-side components can be embedded into existing server-side components via <code>reactpy_django.components.pyscript_component</code>.</li> <li>Tired of writing JavaScript? You can now write PyScript code that runs directly within client browser via the <code>reactpy_django.html.pyscript</code> element.<ul> <li>This is a viable substitution for most JavaScript code.</li> </ul> </li> </ul> <h3 id=changed_3>Changed<a class=headerlink href=#changed_3 title="Permanent link">&para;</a></h3> <ul> <li> <p>New syntax for <code>use_query</code> and <code>use_mutation</code> hooks. Here's a quick comparison of the changes:</p> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
+--> <p class=intro> The format is based on <a href=https://keepachangelog.com/en/1.0.0/ >Keep a Changelog</a>, and this project adheres to <a href=https://semver.org/spec/v2.0.0.html>Semantic Versioning</a>. </p> <hr> <h2 id=unreleased><a href=https://github.com/reactive-python/reactpy-django/compare/5.1.0...HEAD>Unreleased</a><a class=headerlink href=#unreleased title="Permanent link">&para;</a></h2> <h3 id=fixed>Fixed<a class=headerlink href=#fixed title="Permanent link">&para;</a></h3> <ul> <li>Fixed regression in v5.1.0 where components would sometimes not output debug messages when <code>settings.py:DEBUG</code> is enabled.</li> </ul> <h3 id=changed>Changed<a class=headerlink href=#changed title="Permanent link">&para;</a></h3> <ul> <li>Set upper limit on ReactPy version to <code>&lt;2.0.0</code>.</li> <li>ReactPy web modules are now streamed in chunks.</li> <li>ReactPy web modules are now streamed using asynchronous file reading to improve performance.</li> <li>Performed refactoring to utilize <code>ruff</code> as this repository's linter.</li> </ul> <h2 id=510-2024-11-24><a href=https://github.com/reactive-python/reactpy-django/compare/5.0.0...5.1.0>5.1.0</a> - 2024-11-24<a class=headerlink href=#510-2024-11-24 title="Permanent link">&para;</a></h2> <h3 id=added>Added<a class=headerlink href=#added title="Permanent link">&para;</a></h3> <ul> <li><code>settings.py:REACTPY_ASYNC_RENDERING</code> to enable asynchronous rendering of components.</li> </ul> <h3 id=changed_1>Changed<a class=headerlink href=#changed_1 title="Permanent link">&para;</a></h3> <ul> <li>Bumped the minimum ReactPy version to <code>1.1.0</code>.</li> </ul> <h2 id=500-2024-10-22><a href=https://github.com/reactive-python/reactpy-django/compare/4.0.0...5.0.0>5.0.0</a> - 2024-10-22<a class=headerlink href=#500-2024-10-22 title="Permanent link">&para;</a></h2> <h3 id=changed_2>Changed<a class=headerlink href=#changed_2 title="Permanent link">&para;</a></h3> <ul> <li>Now using ReactPy-Router v1 for URL routing, which comes with a slightly different API than before.</li> <li>Removed dependency on <code>aiofile</code>.</li> </ul> <h3 id=removed>Removed<a class=headerlink href=#removed title="Permanent link">&para;</a></h3> <ul> <li>Removed the following <strong>deprecated</strong> features:<ul> <li>The <code>compatibility</code> argument on <code>reactpy_django.components.view_to_component</code></li> <li><code>reactpy_django.components.view_to_component</code> <strong>usage as a decorator</strong></li> <li><code>reactpy_django.decorators.auth_required</code></li> <li><code>reactpy_django.REACTPY_WEBSOCKET_PATH</code></li> <li><code>settings.py:REACTPY_WEBSOCKET_URL</code></li> </ul> </li> </ul> <h2 id=400-2024-06-22><a href=https://github.com/reactive-python/reactpy-django/compare/3.8.1...4.0.0>4.0.0</a> - 2024-06-22<a class=headerlink href=#400-2024-06-22 title="Permanent link">&para;</a></h2> <h3 id=added_1>Added<a class=headerlink href=#added_1 title="Permanent link">&para;</a></h3> <ul> <li>Client-side Python components can now be rendered via the new <code>{% pyscript_component %}</code> template tag<ul> <li>You must first call the <code>{% pyscript_setup %}</code> template tag to load PyScript dependencies</li> </ul> </li> <li>Client-side components can be embedded into existing server-side components via <code>reactpy_django.components.pyscript_component</code>.</li> <li>Tired of writing JavaScript? You can now write PyScript code that runs directly within client browser via the <code>reactpy_django.html.pyscript</code> element.<ul> <li>This is a viable substitution for most JavaScript code.</li> </ul> </li> </ul> <h3 id=changed_3>Changed<a class=headerlink href=#changed_3 title="Permanent link">&para;</a></h3> <ul> <li> <p>New syntax for <code>use_query</code> and <code>use_mutation</code> hooks. Here's a quick comparison of the changes:</p> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
 <span class=normal>2</span>
 <span class=normal>3</span>
 <span class=normal>4</span>
diff --git a/develop/about/contributing/index.html b/develop/about/contributing/index.html
index 67b047ca..dac4d067 100644
--- a/develop/about/contributing/index.html
+++ b/develop/about/contributing/index.html
@@ -1,3 +1,3 @@
 <!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="It's React, but in Python. Now with Django integration."><meta name=author content=Archmonger><link href=https://reactive-python.github.io/reactpy-django/develop/about/contributing/ rel=canonical><link href=../changelog/ rel=prev><link href=../license/ rel=next><link rel=icon href=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.4.0"><title>Contributor Guide - ReactPy-Django</title><link rel=stylesheet href=../../assets/stylesheets/main.9f615399.min.css><link rel=stylesheet href=../../assets/stylesheets/palette.649f08f9.min.css><style>:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h224V368c0-26.5 21.5-48 48-48h112V96c0-35.3-28.7-64-64-64H64zm384 320H336c-8.8 0-16 7.2-16 16v112l32-32 64-64 32-32z"/></svg>');}</style><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../assets/css/main.css><link rel=stylesheet href=../../assets/css/button.css><link rel=stylesheet href=../../assets/css/admonition.css><link rel=stylesheet href=../../assets/css/banner.css><link rel=stylesheet href=../../assets/css/sidebar.css><link rel=stylesheet href=../../assets/css/navbar.css><link rel=stylesheet href=../../assets/css/table-of-contents.css><link rel=stylesheet href=../../assets/css/code.css><link rel=stylesheet href=../../assets/css/footer.css><link rel=stylesheet href=../../assets/css/home.css><script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><script id=__analytics>function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-4KFQN2LWBG"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-4KFQN2LWBG",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-4KFQN2LWBG",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script><script>"undefined"!=typeof __md_analytics&&__md_analytics()</script></head> <body dir=ltr data-md-color-scheme=slate data-md-color-primary=red data-md-color-accent=red> <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#overview class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> <aside class="md-banner md-banner--warning"> <div class="md-banner__inner md-grid md-typeset"> You're not viewing the latest release. <a href=../../..> <strong>Click here to go to latest.</strong> </a> </div> <script>var el=document.querySelector("[data-md-component=outdated]"),outdated=__md_get("__outdated",sessionStorage);!0===outdated&&el&&(el.hidden=!1)</script> </aside> </div> <header class="md-header md-header--shadow md-header--lifted" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../.. title=ReactPy-Django class="md-header__button md-logo" aria-label=ReactPy-Django data-md-component=logo> <img src=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg alt=logo> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> ReactPy-Django </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Contributor Guide </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=red data-md-color-accent=red aria-label="Switch to light mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m3.55 19.09 1.41 1.41 1.8-1.79-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71 1.8 1.79 1.41-1.41-1.79-1.8M20.45 5l-1.41-1.4-1.8 1.79 1.42 1.42M13 1h-2v3h2M6.76 5.39 4.96 3.6 3.55 5l1.79 1.81 1.42-1.42M1 13h3v-2H1m12 9h-2v3h2"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=white data-md-color-accent=red aria-label="Switch to dark mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg> </label> </form> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </label> <nav class=md-search__options aria-label=Search> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg> </button> </nav> </form> <div class=md-search__output> <div class=md-search__scrollwrap data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/reactive-python/reactpy-django title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> ReactPy Django (GitHub) </div> </a> </div> </nav> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../.. class=md-tabs__link> Home </a> </li> <li class=md-tabs__item> <a href=../../learn/add-reactpy-to-a-django-project/ class=md-tabs__link> Get Started </a> </li> <li class=md-tabs__item> <a href=../../reference/components/ class=md-tabs__link> Reference </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../changelog/ class=md-tabs__link> About </a> </li> </ul> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../.. title=ReactPy-Django class="md-nav__button md-logo" aria-label=ReactPy-Django data-md-component=logo> <img src=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg alt=logo> </a> ReactPy-Django </label> <div class=md-nav__source> <a href=https://github.com/reactive-python/reactpy-django title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> ReactPy Django (GitHub) </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../.. class=md-nav__link> <span class=md-ellipsis> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Get Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Get Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../learn/add-reactpy-to-a-django-project/ class=md-nav__link> <span class=md-ellipsis> Add ReactPy to a Django Project </span> </a> </li> <li class=md-nav__item> <a href=../../learn/your-first-component/ class=md-nav__link> <span class=md-ellipsis> Your First Component </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <span class=md-ellipsis> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../reference/components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class=md-nav__item> <a href=../../reference/hooks/ class=md-nav__link> <span class=md-ellipsis> Hooks </span> </a> </li> <li class=md-nav__item> <a href=../../reference/html/ class=md-nav__link> <span class=md-ellipsis> HTML </span> </a> </li> <li class=md-nav__item> <a href=../../reference/router/ class=md-nav__link> <span class=md-ellipsis> URL Router </span> </a> </li> <li class=md-nav__item> <a href=../../reference/decorators/ class=md-nav__link> <span class=md-ellipsis> Decorators </span> </a> </li> <li class=md-nav__item> <a href=../../reference/utils/ class=md-nav__link> <span class=md-ellipsis> Utilities </span> </a> </li> <li class=md-nav__item> <a href=../../reference/template-tag/ class=md-nav__link> <span class=md-ellipsis> Template Tag </span> </a> </li> <li class=md-nav__item> <a href=../../reference/settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../../reference/management-commands/ class=md-nav__link> <span class=md-ellipsis> Management Commands </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4 checked> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> About </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=true> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> About </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../changelog/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Contributor Guide </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Contributor Guide </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#overview class=md-nav__link> Overview </a> </li> <li class=md-nav__item> <a href=#creating-a-development-environment class=md-nav__link> Creating a development environment </a> </li> <li class=md-nav__item> <a href=#executing-test-environment-commands class=md-nav__link> Executing test environment commands </a> <nav class=md-nav aria-label="Executing test environment commands"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#tests class=md-nav__link> Tests </a> </li> <li class=md-nav__item> <a href=#linting-and-formatting class=md-nav__link> Linting and Formatting </a> </li> <li class=md-nav__item> <a href=#documentation class=md-nav__link> Documentation </a> </li> <li class=md-nav__item> <a href=#environment-management class=md-nav__link> Environment Management </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Community </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> Community </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=https://github.com/reactive-python/reactpy-django/discussions class=md-nav__link> <span class=md-ellipsis> GitHub Discussions </span> </a> </li> <li class=md-nav__item> <a href=https://discord.gg/uNb5P4hA9X class=md-nav__link> <span class=md-ellipsis> Discord </span> </a> </li> <li class=md-nav__item> <a href=https://www.reddit.com/r/ReactPy/ class=md-nav__link> <span class=md-ellipsis> Reddit </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#overview class=md-nav__link> Overview </a> </li> <li class=md-nav__item> <a href=#creating-a-development-environment class=md-nav__link> Creating a development environment </a> </li> <li class=md-nav__item> <a href=#executing-test-environment-commands class=md-nav__link> Executing test environment commands </a> <nav class=md-nav aria-label="Executing test environment commands"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#tests class=md-nav__link> Tests </a> </li> <li class=md-nav__item> <a href=#linting-and-formatting class=md-nav__link> Linting and Formatting </a> </li> <li class=md-nav__item> <a href=#documentation class=md-nav__link> Documentation </a> </li> <li class=md-nav__item> <a href=#environment-management class=md-nav__link> Environment Management </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <h1>Contributor Guide</h1> <h2 id=overview>Overview<a class=headerlink href=#overview title="Permanent link">&para;</a></h2> <p class=intro> You will need to set up a Python environment to develop ReactPy-Django. </p> <div class="admonition abstract"> <p class=admonition-title>Note</p> <p>Looking to contribute features that are not Django specific?</p> <p>Everything within the <code>reactpy-django</code> repository must be specific to Django integration. Check out the <a href=https://reactpy.dev/docs/about/contributor-guide.html>ReactPy Core documentation</a> to contribute general features such as components, hooks, and events.</p> </div> <hr> <h2 id=creating-a-development-environment>Creating a development environment<a class=headerlink href=#creating-a-development-environment title="Permanent link">&para;</a></h2> <p>If you plan to make code changes to this repository, you will need to install the following dependencies first:</p> <ul> <li><a href=https://git-scm.com/downloads>Git</a></li> <li><a href=https://www.python.org/downloads/ >Python 3.9+</a></li> <li><a href=https://hatch.pypa.io/latest/ >Hatch</a></li> <li><a href=https://bun.sh/ >Bun</a></li> </ul> <p>Once you finish installing these dependencies, you can clone this repository:</p> <div class=highlight><pre><span></span><code>git<span class=w> </span>clone<span class=w> </span>https://github.com/reactive-python/reactpy-django.git
 <span class=nb>cd</span><span class=w> </span>reactpy-django
-</code></pre></div> <h2 id=executing-test-environment-commands>Executing test environment commands<a class=headerlink href=#executing-test-environment-commands title="Permanent link">&para;</a></h2> <p>By utilizing <code>hatch</code>, the following commands are available to manage the development environment.</p> <h3 id=tests>Tests<a class=headerlink href=#tests title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch test</code></td> <td>Run Python tests using the current environment's Python version</td> </tr> <tr> <td><code>hatch test --all</code></td> <td>Run tests using all compatible Python versions</td> </tr> <tr> <td><code>hatch test --python 3.9</code></td> <td>Run tests using a specific Python version</td> </tr> <tr> <td><code>hatch test --include "django=5.1"</code></td> <td>Run tests using a specific Django version</td> </tr> <tr> <td><code>hatch test -k test_object_in_templatetag</code></td> <td>Run only a specific test</td> </tr> <tr> <td><code>hatch test --ds test_app.settings_multi_db</code></td> <td>Run tests with a specific Django settings file</td> </tr> <tr> <td><code>hatch run django:runserver</code></td> <td>Manually run the Django development server without running tests</td> </tr> </tbody> </table> <details class=question> <summary>What other arguments are available to me?</summary> <p>The <code>hatch test</code> command is a wrapper for <code>pytest</code>. Hatch "intercepts" a handful of arguments, which can be previewed by typing <code>hatch test --help</code>.</p> <p>Any additional arguments in the <code>test</code> command are directly passed on to pytest. See the <a href=https://docs.pytest.org/en/stable/reference/reference.html#command-line-flags>pytest documentation</a> for what additional arguments are available.</p> </details> <h3 id=linting-and-formatting>Linting and Formatting<a class=headerlink href=#linting-and-formatting title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch fmt</code></td> <td>Run all linters and formatters</td> </tr> <tr> <td><code>hatch fmt --check</code></td> <td>Run all linters and formatters, but do not save fixes to the disk</td> </tr> <tr> <td><code>hatch fmt --linter</code></td> <td>Run only linters</td> </tr> <tr> <td><code>hatch fmt --formatter</code></td> <td>Run only formatters</td> </tr> <tr> <td><code>hatch run javascript:check</code></td> <td>Run the JavaScript linter/formatter</td> </tr> <tr> <td><code>hatch run javascript:fix</code></td> <td>Run the JavaScript linter/formatter and write fixes to disk</td> </tr> </tbody> </table> <details class=tip> <summary>Configure your IDE for linting</summary> <p>This repository uses <code>hatch fmt</code> for linting and formatting, which is a <a href=https://hatch.pypa.io/latest/config/internal/static-analysis/#default-settings>modestly customized</a> version of <a href=https://github.com/astral-sh/ruff><code>ruff</code></a>.</p> <p>You can install <code>ruff</code> as a plugin to your preferred code editor to create a similar environment.</p> </details> <h3 id=documentation>Documentation<a class=headerlink href=#documentation title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch run docs:serve</code></td> <td>Start the <a href=https://www.mkdocs.org/ ><code>mkdocs</code></a> server to view documentation locally</td> </tr> <tr> <td><code>hatch run docs:build</code></td> <td>Build the documentation</td> </tr> <tr> <td><code>hatch run docs:linkcheck</code></td> <td>Check for broken links in the documentation</td> </tr> <tr> <td><code>hatch run docs:check_examples</code></td> <td>Run linter on code examples in the documentation</td> </tr> </tbody> </table> <h3 id=environment-management>Environment Management<a class=headerlink href=#environment-management title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch build --clean</code></td> <td>Build the package from source</td> </tr> <tr> <td><code>hatch env prune</code></td> <td>Delete all virtual environments created by <code>hatch</code></td> </tr> <tr> <td><code>hatch python install 3.12</code></td> <td>Install a specific Python version to your system</td> </tr> </tbody> </table> <details class=tip> <summary>Check out Hatch for all available commands!</summary> <p>This documentation only covers commonly used commands.</p> <p>You can type <code>hatch --help</code> to see all available commands.</p> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 1, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div> <h2 id=executing-test-environment-commands>Executing test environment commands<a class=headerlink href=#executing-test-environment-commands title="Permanent link">&para;</a></h2> <p>By utilizing <code>hatch</code>, the following commands are available to manage the development environment.</p> <h3 id=tests>Tests<a class=headerlink href=#tests title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch test</code></td> <td>Run Python tests using the current environment's Python version</td> </tr> <tr> <td><code>hatch test --all</code></td> <td>Run tests using all compatible Python versions</td> </tr> <tr> <td><code>hatch test --python 3.9</code></td> <td>Run tests using a specific Python version</td> </tr> <tr> <td><code>hatch test --include "django=5.1"</code></td> <td>Run tests using a specific Django version</td> </tr> <tr> <td><code>hatch test -k test_object_in_templatetag</code></td> <td>Run only a specific test</td> </tr> <tr> <td><code>hatch test --ds test_app.settings_multi_db</code></td> <td>Run tests with a specific Django settings file</td> </tr> <tr> <td><code>hatch run django:runserver</code></td> <td>Manually run the Django development server without running tests</td> </tr> </tbody> </table> <details class=question> <summary>What other arguments are available to me?</summary> <p>The <code>hatch test</code> command is a wrapper for <code>pytest</code>. Hatch "intercepts" a handful of arguments, which can be previewed by typing <code>hatch test --help</code>.</p> <p>Any additional arguments in the <code>test</code> command are directly passed on to pytest. See the <a href=https://docs.pytest.org/en/stable/reference/reference.html#command-line-flags>pytest documentation</a> for what additional arguments are available.</p> </details> <h3 id=linting-and-formatting>Linting and Formatting<a class=headerlink href=#linting-and-formatting title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch fmt</code></td> <td>Run all linters and formatters</td> </tr> <tr> <td><code>hatch fmt --check</code></td> <td>Run all linters and formatters, but do not save fixes to the disk</td> </tr> <tr> <td><code>hatch fmt --linter</code></td> <td>Run only linters</td> </tr> <tr> <td><code>hatch fmt --formatter</code></td> <td>Run only formatters</td> </tr> <tr> <td><code>hatch run javascript:check</code></td> <td>Run the JavaScript linter/formatter</td> </tr> <tr> <td><code>hatch run javascript:fix</code></td> <td>Run the JavaScript linter/formatter and write fixes to disk</td> </tr> </tbody> </table> <details class=tip> <summary>Configure your IDE for linting</summary> <p>This repository uses <code>hatch fmt</code> for linting and formatting, which is a <a href=https://hatch.pypa.io/latest/config/internal/static-analysis/#default-settings>modestly customized</a> version of <a href=https://github.com/astral-sh/ruff><code>ruff</code></a>.</p> <p>You can install <code>ruff</code> as a plugin to your preferred code editor to create a similar environment.</p> </details> <h3 id=documentation>Documentation<a class=headerlink href=#documentation title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch run docs:serve</code></td> <td>Start the <a href=https://www.mkdocs.org/ ><code>mkdocs</code></a> server to view documentation locally</td> </tr> <tr> <td><code>hatch run docs:build</code></td> <td>Build the documentation</td> </tr> <tr> <td><code>hatch run docs:linkcheck</code></td> <td>Check for broken links in the documentation</td> </tr> <tr> <td><code>hatch fmt docs --check</code></td> <td>Run linter on code examples in the documentation</td> </tr> </tbody> </table> <h3 id=environment-management>Environment Management<a class=headerlink href=#environment-management title="Permanent link">&para;</a></h3> <table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>hatch build --clean</code></td> <td>Build the package from source</td> </tr> <tr> <td><code>hatch env prune</code></td> <td>Delete all virtual environments created by <code>hatch</code></td> </tr> <tr> <td><code>hatch python install 3.12</code></td> <td>Install a specific Python version to your system</td> </tr> </tbody> </table> <details class=tip> <summary>Check out Hatch for all available commands!</summary> <p>This documentation only covers commonly used commands.</p> <p>You can type <code>hatch --help</code> to see all available commands.</p> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/learn/add-reactpy-to-a-django-project/index.html b/develop/learn/add-reactpy-to-a-django-project/index.html
index e6490db5..a3ff6424 100644
--- a/develop/learn/add-reactpy-to-a-django-project/index.html
+++ b/develop/learn/add-reactpy-to-a-django-project/index.html
@@ -40,8 +40,7 @@
 <span class=normal>16</span>
 <span class=normal>17</span>
 <span class=normal>18</span>
-<span class=normal>19</span>
-<span class=normal>20</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>os</span>
+<span class=normal>19</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>os</span>
 
 <span class=kn>from</span> <span class=nn>django.core.asgi</span> <span class=kn>import</span> <span class=n>get_asgi_application</span>
 
@@ -53,22 +52,19 @@
 
 
 <span class=kn>from</span> <span class=nn>channels.routing</span> <span class=kn>import</span> <span class=n>ProtocolTypeRouter</span><span class=p>,</span> <span class=n>URLRouter</span>  <span class=c1># noqa: E402</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django</span> <span class=kn>import</span> <span class=n>REACTPY_WEBSOCKET_ROUTE</span>  <span class=c1># noqa: E402</span>
 
-<span class=n>application</span> <span class=o>=</span> <span class=n>ProtocolTypeRouter</span><span class=p>(</span>
-    <span class=p>{</span>
-        <span class=s2>&quot;http&quot;</span><span class=p>:</span> <span class=n>django_asgi_app</span><span class=p>,</span>
-        <span class=s2>&quot;websocket&quot;</span><span class=p>:</span> <span class=n>URLRouter</span><span class=p>([</span><span class=n>REACTPY_WEBSOCKET_ROUTE</span><span class=p>]),</span>
-    <span class=p>}</span>
-<span class=p>)</span>
+<span class=n>application</span> <span class=o>=</span> <span class=n>ProtocolTypeRouter</span><span class=p>({</span>
+    <span class=s2>&quot;http&quot;</span><span class=p>:</span> <span class=n>django_asgi_app</span><span class=p>,</span>
+    <span class=s2>&quot;websocket&quot;</span><span class=p>:</span> <span class=n>URLRouter</span><span class=p>([</span><span class=n>REACTPY_WEBSOCKET_ROUTE</span><span class=p>]),</span>
+<span class=p>})</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> <details class=info> <summary>Add <code class=highlight><span class=n>AuthMiddlewareStack</span></code> (Optional)</summary> <p>There are many situations where you need to access the Django <code class=highlight><span class=n>User</span></code> or <code class=highlight><span class=n>Session</span></code> objects within ReactPy components. For example, if you want to:</p> <ol> <li>Access the <code class=highlight><span class=n>User</span></code> that is currently logged in</li> <li>Access Django's <code class=highlight><span class=n>Session</span></code> object</li> <li>Login or logout the current <code class=highlight><span class=n>User</span></code></li> </ol> <p>In these situations will need to ensure you are using <code class=highlight><span class=n>AuthMiddlewareStack</span></code>.</p> <div class=highlight><pre><span></span><code><span class=kn>from</span> <span class=nn>channels.auth</span> <span class=kn>import</span> <span class=n>AuthMiddlewareStack</span>  <span class=c1># noqa: E402</span>
 
-<span class=n>application</span> <span class=o>=</span> <span class=n>ProtocolTypeRouter</span><span class=p>(</span>
-    <span class=p>{</span>
-        <span class=s2>&quot;http&quot;</span><span class=p>:</span> <span class=n>django_asgi_app</span><span class=p>,</span>
-        <span class=s2>&quot;websocket&quot;</span><span class=p>:</span> <span class=n>AuthMiddlewareStack</span><span class=p>(</span><span class=n>URLRouter</span><span class=p>([</span><span class=n>REACTPY_WEBSOCKET_ROUTE</span><span class=p>])),</span>
-    <span class=p>}</span>
-<span class=p>)</span>
+<span class=n>application</span> <span class=o>=</span> <span class=n>ProtocolTypeRouter</span><span class=p>({</span>
+    <span class=s2>&quot;http&quot;</span><span class=p>:</span> <span class=n>django_asgi_app</span><span class=p>,</span>
+    <span class=s2>&quot;websocket&quot;</span><span class=p>:</span> <span class=n>AuthMiddlewareStack</span><span class=p>(</span><span class=n>URLRouter</span><span class=p>([</span><span class=n>REACTPY_WEBSOCKET_ROUTE</span><span class=p>])),</span>
+<span class=p>})</span>
 </code></pre></div> </details> <details class=question> <summary>Where is my <code>asgi.py</code>?</summary> <p>If you do not have an <code>asgi.py</code>, follow the <a href=https://channels.readthedocs.io/en/stable/installation.html><code>channels</code> installation guide</a>.</p> </details> <h2 id=step-5-run-database-migrations>Step 5: Run database migrations<a class=headerlink href=#step-5-run-database-migrations title="Permanent link">&para;</a></h2> <p>Run Django's <a href=https://docs.djangoproject.com/en/stable/topics/migrations/ ><code>migrate</code> command</a> to initialize ReactPy-Django's database table.</p> <div class=highlight><pre><span></span><code>python<span class=w> </span>manage.py<span class=w> </span>migrate
 </code></pre></div> <h2 id=step-6-check-your-configuration>Step 6: Check your configuration<a class=headerlink href=#step-6-check-your-configuration title="Permanent link">&para;</a></h2> <p>Run Django's <a href=https://docs.djangoproject.com/en/stable/ref/django-admin/#check><code>check</code> command</a> to verify if ReactPy was set up correctly.</p> <div class=highlight><pre><span></span><code>python<span class=w> </span>manage.py<span class=w> </span>check
 </code></pre></div> <h2 id=step-7-create-your-first-component>Step 7: Create your first component<a class=headerlink href=#step-7-create-your-first-component title="Permanent link">&para;</a></h2> <p>The <a href=../your-first-component/ >next page</a> will show you how to create your first ReactPy component.</p> <p>Prefer a quick summary? Read the <strong>At a Glance</strong> section below.</p> <div class="admonition info"> <p class=admonition-title>At a Glance</p> <p><font size=5><strong><code>my_app/components.py</code></strong></font></p> <p>You will need a file to define your <a href=https://github.com/reactive-python/reactpy>ReactPy</a> components. We recommend creating a <code>components.py</code> file within your chosen <strong>Django app</strong> to start out. Within this file, we will create a simple <code>hello_world</code> component.</p> <p><!--py-header-end--> <!--py-code-start--></p> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
@@ -93,4 +89,4 @@
 <span class=x>    </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;example_project.my_app.components.hello_world&quot;</span> <span class=nv>recipient</span><span class=o>=</span><span class=s2>&quot;World&quot;</span> <span class=cp>%}</span>
 <span class=x>  &lt;/body&gt;</span>
 <span class=x>&lt;/html&gt;</span>
-</code></pre></div></td></tr></table></div> </div> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 22, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </div> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/learn/your-first-component/index.html b/develop/learn/your-first-component/index.html
index dc100b7e..fd4d04f4 100644
--- a/develop/learn/your-first-component/index.html
+++ b/develop/learn/your-first-component/index.html
@@ -77,11 +77,13 @@
 <span class=normal>3</span>
 <span class=normal>4</span>
 <span class=normal>5</span>
-<span class=normal>6</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span>
+<span class=normal>6</span>
+<span class=normal>7</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.urls</span> <span class=kn>import</span> <span class=n>path</span>
+
 <span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
 
 <span class=n>urlpatterns</span> <span class=o>=</span> <span class=p>[</span>
     <span class=n>path</span><span class=p>(</span><span class=s2>&quot;example/&quot;</span><span class=p>,</span> <span class=n>views</span><span class=o>.</span><span class=n>index</span><span class=p>),</span>
 <span class=p>]</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> <details class=question> <summary>Which urls.py do I add my views to?</summary> <p>For simple <strong>Django projects</strong>, you can easily add all of your views directly into the <strong>Django project's</strong> <code>urls.py</code>. However, as you start increase your project's complexity you might end up with way too much within one file.</p> <p>Once you reach that point, we recommend creating an individual <code>urls.py</code> within each of your <strong>Django apps</strong>.</p> <p>Then, within your <strong>Django project's</strong> <code>urls.py</code> you will use Django's <a href=https://docs.djangoproject.com/en/stable/ref/urls/#include><code>include</code> function</a> to link it all together.</p> </details> <h2 id=viewing-your-component>Viewing your component<a class=headerlink href=#viewing-your-component title="Permanent link">&para;</a></h2> <p>To test your new Django view, run the following command to start up a development web server.</p> <div class=highlight><pre><span></span><code>python<span class=w> </span>manage.py<span class=w> </span>runserver
-</code></pre></div> <p>Now you can navigate to your <strong>Django project</strong> URL that contains a ReactPy component, such as <a href=http://127.0.0.1:8000/example/ ><code>http://127.0.0.1:8000/example/</code></a> (<a href=#setting-up-a-django-view><em>from the previous step</em></a>).</p> <p>If you copy-pasted our example component, you will now see your component display "Hello World".</p> <details class=warning> <summary>Do not use <code>manage.py runserver</code> for production</summary> <p>This command is only intended for development purposes. For production deployments make sure to read <a href=https://docs.djangoproject.com/en/stable/howto/deployment/ >Django's documentation</a>.</p> </details> <h2 id=learn-more>Learn more<a class=headerlink href=#learn-more title="Permanent link">&para;</a></h2> <p><strong>Congratulations!</strong> If you followed the previous steps, you have now created a "Hello World" component using ReactPy-Django!</p> <div class="admonition info"> <p class=admonition-title>Deep Dive</p> <p>The docs you are reading only covers our Django integration. To learn more, check out one of the following links:</p> <ul> <li><a href=../../reference/components/ >ReactPy-Django Feature Reference</a></li> <li><a href=https://reactpy.dev/docs/guides/creating-interfaces/index.html>ReactPy Core Documentation</a></li> <li><a href=https://discord.gg/uNb5P4hA9X>Ask Questions on Discord</a></li> </ul> <p>Additionally, the vast majority of tutorials/guides you find for ReactJS can be applied to ReactPy.</p> </div> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 22, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div> <p>Now you can navigate to your <strong>Django project</strong> URL that contains a ReactPy component, such as <a href=http://127.0.0.1:8000/example/ ><code>http://127.0.0.1:8000/example/</code></a> (<a href=#setting-up-a-django-view><em>from the previous step</em></a>).</p> <p>If you copy-pasted our example component, you will now see your component display "Hello World".</p> <details class=warning> <summary>Do not use <code>manage.py runserver</code> for production</summary> <p>This command is only intended for development purposes. For production deployments make sure to read <a href=https://docs.djangoproject.com/en/stable/howto/deployment/ >Django's documentation</a>.</p> </details> <h2 id=learn-more>Learn more<a class=headerlink href=#learn-more title="Permanent link">&para;</a></h2> <p><strong>Congratulations!</strong> If you followed the previous steps, you have now created a "Hello World" component using ReactPy-Django!</p> <div class="admonition info"> <p class=admonition-title>Deep Dive</p> <p>The docs you are reading only covers our Django integration. To learn more, check out one of the following links:</p> <ul> <li><a href=../../reference/components/ >ReactPy-Django Feature Reference</a></li> <li><a href=https://reactpy.dev/docs/guides/creating-interfaces/index.html>ReactPy Core Documentation</a></li> <li><a href=https://discord.gg/uNb5P4hA9X>Ask Questions on Discord</a></li> </ul> <p>Additionally, the vast majority of tutorials/guides you find for ReactJS can be applied to ReactPy.</p> </div> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/components/index.html b/develop/reference/components/index.html
index 8cecdf8b..eae3bda5 100644
--- a/develop/reference/components/index.html
+++ b/develop/reference/components/index.html
@@ -7,7 +7,9 @@
 <span class=normal> 7</span>
 <span class=normal> 8</span>
 <span class=normal> 9</span>
-<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>10</span>
+<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>pyscript_component</span>
 
 
@@ -75,18 +77,16 @@
 <span class=normal> 7</span>
 <span class=normal> 8</span>
 <span class=normal> 9</span>
-<span class=normal>10</span>
-<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>js</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>js</span>
 <span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
 
 <span class=nd>@component</span>
 <span class=k>def</span> <span class=nf>root</span><span class=p>():</span>
-
-    <span class=k>def</span> <span class=nf>onClick</span><span class=p>(</span><span class=n>event</span><span class=p>):</span>
+    <span class=k>def</span> <span class=nf>on_click</span><span class=p>(</span><span class=n>event</span><span class=p>):</span>
         <span class=n>js</span><span class=o>.</span><span class=n>document</span><span class=o>.</span><span class=n>title</span> <span class=o>=</span> <span class=s2>&quot;New window title&quot;</span>
 
-    <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>({</span><span class=s2>&quot;onClick&quot;</span><span class=p>:</span> <span class=n>onClick</span><span class=p>},</span> <span class=s2>&quot;Click Me!&quot;</span><span class=p>)</span>
+    <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>({</span><span class=s2>&quot;onClick&quot;</span><span class=p>:</span> <span class=n>on_click</span><span class=p>},</span> <span class=s2>&quot;Click Me!&quot;</span><span class=p>)</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> <p><strong>PyScript FFI</strong></p> <p>...</p> <p><strong>PyScript JS Modules</strong></p> <p>Assuming you have a local bundle stored within your project's static files, you can import JavaScript modules in a fashion similar to <code class=highlight><span class=k>import</span><span class=w> </span><span class=p>{</span><span class=nx>moment</span><span class=p>}</span><span class=w> </span><span class=kr>from</span><span class=w> </span><span class=s1>&#39;static/moment.js&#39;</span></code>. You will first need to configure your <code class=highlight><span class=cp>{%</span> <span class=k>pyscript_setup</span> <span class=cp>%}</span></code> block to make the <code>moment.js</code> module available to PyScript. Then, this module can be accessed within <code class=highlight><span class=n>pyscript</span><span class=o>.</span><span class=n>js_modules</span><span class=o>.*</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=4:2><input checked=checked id=__tabbed_4_1 name=__tabbed_4 type=radio><input id=__tabbed_4_2 name=__tabbed_4 type=radio><div class=tabbed-labels><label for=__tabbed_4_1>root.py</label><label for=__tabbed_4_2>my_template.html</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
 <span class=normal> 2</span>
 <span class=normal> 3</span>
@@ -148,7 +148,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>pyscript_component</span>
 
 
@@ -160,22 +162,16 @@
             <span class=s2>&quot;./example_project/my_app/components/child.py&quot;</span><span class=p>,</span>
         <span class=p>),</span>
     <span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
-<span class=normal> 2</span>
-<span class=normal> 3</span>
-<span class=normal> 4</span>
-<span class=normal> 5</span>
-<span class=normal> 6</span>
-<span class=normal> 7</span>
-<span class=normal> 8</span>
-<span class=normal> 9</span>
-<span class=normal>10</span>
-<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>typing</span> <span class=kn>import</span> <span class=n>TYPE_CHECKING</span>
-
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
+<span class=normal>2</span>
+<span class=normal>3</span>
+<span class=normal>4</span>
+<span class=normal>5</span>
+<span class=normal>6</span>
+<span class=normal>7</span>
+<span class=normal>8</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
-<span class=k>if</span> <span class=n>TYPE_CHECKING</span><span class=p>:</span>
-    <span class=kn>from</span> <span class=nn>.child</span> <span class=kn>import</span> <span class=n>child_component</span>
+<span class=kn>from</span> <span class=nn>example.components</span> <span class=kn>import</span> <span class=n>child_component</span>
 
 
 <span class=nd>@component</span>
@@ -203,7 +199,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>pyscript_component</span>
 
 
@@ -226,7 +224,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>pyscript_component</span>
 
 
@@ -249,7 +249,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>pyscript_component</span>
 
 
@@ -285,9 +287,9 @@
 <span class=normal>11</span>
 <span class=normal>12</span>
 <span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
 <span class=n>hello_world_component</span> <span class=o>=</span> <span class=n>view_to_component</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>)</span>
 
@@ -319,9 +321,9 @@
 <span class=normal>11</span>
 <span class=normal>12</span>
 <span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
 <span class=n>hello_world_component</span> <span class=o>=</span> <span class=n>view_to_component</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>HelloWorld</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
 
@@ -368,9 +370,9 @@
 <span class=normal>22</span>
 <span class=normal>23</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.http</span> <span class=kn>import</span> <span class=n>HttpRequest</span>
 <span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
 <span class=n>hello_world_component</span> <span class=o>=</span> <span class=n>view_to_component</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>)</span>
 
@@ -411,9 +413,9 @@
 <span class=normal>11</span>
 <span class=normal>12</span>
 <span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
 <span class=n>hello_world_component</span> <span class=o>=</span> <span class=n>view_to_component</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>)</span>
 
@@ -451,12 +453,10 @@
 <span class=normal>17</span>
 <span class=normal>18</span>
 <span class=normal>19</span>
-<span class=normal>20</span>
-<span class=normal>21</span>
-<span class=normal>22</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
+<span class=normal>20</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_component</span>
 
 
 <span class=k>def</span> <span class=nf>example_transform</span><span class=p>(</span><span class=n>vdom</span><span class=p>):</span>
@@ -465,9 +465,7 @@
         <span class=n>vdom</span><span class=p>[</span><span class=s2>&quot;children&quot;</span><span class=p>][</span><span class=mi>0</span><span class=p>]</span> <span class=o>=</span> <span class=s2>&quot;Farewell World!&quot;</span>
 
 
-<span class=n>hello_world_component</span> <span class=o>=</span> <span class=n>view_to_component</span><span class=p>(</span>
-    <span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>,</span> <span class=n>transforms</span><span class=o>=</span><span class=p>[</span><span class=n>example_transform</span><span class=p>]</span>
-<span class=p>)</span>
+<span class=n>hello_world_component</span> <span class=o>=</span> <span class=n>view_to_component</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>,</span> <span class=n>transforms</span><span class=o>=</span><span class=p>[</span><span class=n>example_transform</span><span class=p>])</span>
 
 
 <span class=nd>@component</span>
@@ -497,9 +495,9 @@
 <span class=normal>11</span>
 <span class=normal>12</span>
 <span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
 <span class=n>hello_world_iframe</span> <span class=o>=</span> <span class=n>view_to_iframe</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>)</span>
 
@@ -529,9 +527,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
 
 <span class=k>class</span> <span class=nc>ExampleAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
@@ -552,9 +550,9 @@
 <span class=normal>11</span>
 <span class=normal>12</span>
 <span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
 <span class=n>hello_world_iframe</span> <span class=o>=</span> <span class=n>view_to_iframe</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>HelloWorld</span><span class=o>.</span><span class=n>as_view</span><span class=p>())</span>
 
@@ -588,9 +586,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
 
 <span class=k>class</span> <span class=nc>ExampleAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
@@ -618,9 +616,9 @@
 <span class=normal>18</span>
 <span class=normal>19</span>
 <span class=normal>20</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
 <span class=n>hello_world_iframe</span> <span class=o>=</span> <span class=n>view_to_iframe</span><span class=p>(</span>
     <span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>,</span>
@@ -657,9 +655,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
 
 <span class=k>class</span> <span class=nc>ExampleAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
@@ -679,16 +677,12 @@
 <span class=normal>10</span>
 <span class=normal>11</span>
 <span class=normal>12</span>
-<span class=normal>13</span>
-<span class=normal>14</span>
-<span class=normal>15</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>view_to_iframe</span>
 
-<span class=n>hello_world_iframe</span> <span class=o>=</span> <span class=n>view_to_iframe</span><span class=p>(</span>
-    <span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>,</span> <span class=n>extra_props</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;title&quot;</span><span class=p>:</span> <span class=s2>&quot;Hello World!&quot;</span><span class=p>}</span>
-<span class=p>)</span>
+<span class=n>hello_world_iframe</span> <span class=o>=</span> <span class=n>view_to_iframe</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>,</span> <span class=n>extra_props</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;title&quot;</span><span class=p>:</span> <span class=s2>&quot;Hello World!&quot;</span><span class=p>})</span>
 
 
 <span class=nd>@component</span>
@@ -716,9 +710,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
 
 <span class=k>class</span> <span class=nc>ExampleAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
@@ -735,7 +729,9 @@
 <span class=normal> 7</span>
 <span class=normal> 8</span>
 <span class=normal> 9</span>
-<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>10</span>
+<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>django_css</span>
 
 
@@ -764,25 +760,21 @@
         <span class=n>html</span><span class=o>.</span><span class=n>link</span><span class=p>({</span><span class=s2>&quot;rel&quot;</span><span class=p>:</span> <span class=s2>&quot;stylesheet&quot;</span><span class=p>,</span> <span class=s2>&quot;href&quot;</span><span class=p>:</span> <span class=n>static</span><span class=p>(</span><span class=s2>&quot;css/buttons.css&quot;</span><span class=p>)}),</span>
         <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>(</span><span class=s2>&quot;My Button!&quot;</span><span class=p>),</span>
     <span class=p>)</span>
-</code></pre></div></td></tr></table></div> </details> <details class=question> <summary>How do I load external CSS?</summary> <p><code class=highlight><span class=n>django_css</span></code> can only be used with local static files.</p> <p>For external CSS, you should use <code class=highlight><span class=n>html</span><span class=o>.</span><span class=n>link</span></code>.</p> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
-<span class=normal> 2</span>
-<span class=normal> 3</span>
-<span class=normal> 4</span>
-<span class=normal> 5</span>
-<span class=normal> 6</span>
-<span class=normal> 7</span>
-<span class=normal> 8</span>
-<span class=normal> 9</span>
-<span class=normal>10</span>
-<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </details> <details class=question> <summary>How do I load external CSS?</summary> <p><code class=highlight><span class=n>django_css</span></code> can only be used with local static files.</p> <p>For external CSS, you should use <code class=highlight><span class=n>html</span><span class=o>.</span><span class=n>link</span></code>.</p> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
+<span class=normal>2</span>
+<span class=normal>3</span>
+<span class=normal>4</span>
+<span class=normal>5</span>
+<span class=normal>6</span>
+<span class=normal>7</span>
+<span class=normal>8</span>
+<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
 
 <span class=nd>@component</span>
 <span class=k>def</span> <span class=nf>my_component</span><span class=p>():</span>
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span>
-        <span class=n>html</span><span class=o>.</span><span class=n>link</span><span class=p>(</span>
-            <span class=p>{</span><span class=s2>&quot;rel&quot;</span><span class=p>:</span> <span class=s2>&quot;stylesheet&quot;</span><span class=p>,</span> <span class=s2>&quot;href&quot;</span><span class=p>:</span> <span class=s2>&quot;https://example.com/external-styles.css&quot;</span><span class=p>}</span>
-        <span class=p>),</span>
+        <span class=n>html</span><span class=o>.</span><span class=n>link</span><span class=p>({</span><span class=s2>&quot;rel&quot;</span><span class=p>:</span> <span class=s2>&quot;stylesheet&quot;</span><span class=p>,</span> <span class=s2>&quot;href&quot;</span><span class=p>:</span> <span class=s2>&quot;https://example.com/external-styles.css&quot;</span><span class=p>}),</span>
         <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>(</span><span class=s2>&quot;My Button!&quot;</span><span class=p>),</span>
     <span class=p>)</span>
 </code></pre></div></td></tr></table></div> </details> <details class=question> <summary>Why not load my CSS in <code class=highlight><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span></code>?</summary> <p>Traditionally, stylesheets are loaded in your <code class=highlight><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span></code> using Django's <code class=highlight><span class=cp>{%</span> <span class=k>static</span> <span class=cp>%}</span></code> template tag.</p> <p>However, to help improve webpage load times you can use this <code class=highlight><span class=n>django_css</span></code> component to defer loading your stylesheet until it is needed.</p> </details> <hr> <h2 id=django-js>Django JS<a class=headerlink href=#django-js title="Permanent link">&para;</a></h2> <p>Allows you to defer loading JavaScript until a component begins rendering. This JavaScript must be stored within <a href=https://docs.djangoproject.com/en/stable/howto/static-files/ >Django's static files</a>.</p> <!--
@@ -801,7 +793,9 @@
 <span class=normal> 7</span>
 <span class=normal> 8</span>
 <span class=normal> 9</span>
-<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>10</span>
+<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.components</span> <span class=kn>import</span> <span class=n>django_js</span>
 
 
@@ -847,4 +841,4 @@
         <span class=n>html</span><span class=o>.</span><span class=n>script</span><span class=p>({</span><span class=s2>&quot;src&quot;</span><span class=p>:</span> <span class=s2>&quot;https://example.com/external-scripts.js&quot;</span><span class=p>}),</span>
         <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>(</span><span class=s2>&quot;My Button!&quot;</span><span class=p>),</span>
     <span class=p>)</span>
-</code></pre></div></td></tr></table></div> </details> <details class=question> <summary>Why not load my JS in <code class=highlight><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span></code>?</summary> <p>Traditionally, JavaScript is loaded in your <code class=highlight><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span></code> using Django's <code class=highlight><span class=cp>{%</span> <span class=k>static</span> <span class=cp>%}</span></code> template tag.</p> <p>However, to help improve webpage load times you can use this <code class=highlight><span class=n>django_js</span></code> component to defer loading your JavaScript until it is needed.</p> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">November 25, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </details> <details class=question> <summary>Why not load my JS in <code class=highlight><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span></code>?</summary> <p>Traditionally, JavaScript is loaded in your <code class=highlight><span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span></code> using Django's <code class=highlight><span class=cp>{%</span> <span class=k>static</span> <span class=cp>%}</span></code> template tag.</p> <p>However, to help improve webpage load times you can use this <code class=highlight><span class=n>django_js</span></code> component to defer loading your JavaScript until it is needed.</p> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/decorators/index.html b/develop/reference/decorators/index.html
index f62042b4..2d9c8725 100644
--- a/develop/reference/decorators/index.html
+++ b/develop/reference/decorators/index.html
@@ -9,7 +9,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.decorators</span> <span class=kn>import</span> <span class=n>user_passes_test</span>
 
 
@@ -37,7 +39,9 @@
 <span class=normal>14</span>
 <span class=normal>15</span>
 <span class=normal>16</span>
-<span class=normal>17</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>17</span>
+<span class=normal>18</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.decorators</span> <span class=kn>import</span> <span class=n>user_passes_test</span>
 
 
@@ -65,7 +69,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.decorators</span> <span class=kn>import</span> <span class=n>user_passes_test</span>
 
 
@@ -77,4 +83,4 @@
 <span class=nd>@component</span>
 <span class=k>def</span> <span class=nf>my_component</span><span class=p>():</span>
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=s2>&quot;I am logged in!&quot;</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 22, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </div> </div> </div> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/hooks/index.html b/develop/reference/hooks/index.html
index ddef3a3e..640a1f7b 100644
--- a/develop/reference/hooks/index.html
+++ b/develop/reference/hooks/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="It's React, but in Python. Now with Django integration."><meta name=author content=Archmonger><link href=https://reactive-python.github.io/reactpy-django/develop/reference/hooks/ rel=canonical><link href=../components/ rel=prev><link href=../html/ rel=next><link rel=icon href=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.4.0"><title>Hooks - ReactPy-Django</title><link rel=stylesheet href=../../assets/stylesheets/main.9f615399.min.css><link rel=stylesheet href=../../assets/stylesheets/palette.649f08f9.min.css><style>:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h224V368c0-26.5 21.5-48 48-48h112V96c0-35.3-28.7-64-64-64H64zm384 320H336c-8.8 0-16 7.2-16 16v112l32-32 64-64 32-32z"/></svg>');}</style><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../assets/css/main.css><link rel=stylesheet href=../../assets/css/button.css><link rel=stylesheet href=../../assets/css/admonition.css><link rel=stylesheet href=../../assets/css/banner.css><link rel=stylesheet href=../../assets/css/sidebar.css><link rel=stylesheet href=../../assets/css/navbar.css><link rel=stylesheet href=../../assets/css/table-of-contents.css><link rel=stylesheet href=../../assets/css/code.css><link rel=stylesheet href=../../assets/css/footer.css><link rel=stylesheet href=../../assets/css/home.css><script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><script id=__analytics>function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-4KFQN2LWBG"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-4KFQN2LWBG",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-4KFQN2LWBG",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script><script>"undefined"!=typeof __md_analytics&&__md_analytics()</script></head> <body dir=ltr data-md-color-scheme=slate data-md-color-primary=red data-md-color-accent=red> <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#overview class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> <aside class="md-banner md-banner--warning"> <div class="md-banner__inner md-grid md-typeset"> You're not viewing the latest release. <a href=../../..> <strong>Click here to go to latest.</strong> </a> </div> <script>var el=document.querySelector("[data-md-component=outdated]"),outdated=__md_get("__outdated",sessionStorage);!0===outdated&&el&&(el.hidden=!1)</script> </aside> </div> <header class="md-header md-header--shadow md-header--lifted" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../.. title=ReactPy-Django class="md-header__button md-logo" aria-label=ReactPy-Django data-md-component=logo> <img src=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg alt=logo> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> ReactPy-Django </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Hooks </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=red data-md-color-accent=red aria-label="Switch to light mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m3.55 19.09 1.41 1.41 1.8-1.79-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71 1.8 1.79 1.41-1.41-1.79-1.8M20.45 5l-1.41-1.4-1.8 1.79 1.42 1.42M13 1h-2v3h2M6.76 5.39 4.96 3.6 3.55 5l1.79 1.81 1.42-1.42M1 13h3v-2H1m12 9h-2v3h2"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=white data-md-color-accent=red aria-label="Switch to dark mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg> </label> </form> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </label> <nav class=md-search__options aria-label=Search> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg> </button> </nav> </form> <div class=md-search__output> <div class=md-search__scrollwrap data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/reactive-python/reactpy-django title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> ReactPy Django (GitHub) </div> </a> </div> </nav> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../.. class=md-tabs__link> Home </a> </li> <li class=md-tabs__item> <a href=../../learn/add-reactpy-to-a-django-project/ class=md-tabs__link> Get Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../components/ class=md-tabs__link> Reference </a> </li> <li class=md-tabs__item> <a href=../../about/changelog/ class=md-tabs__link> About </a> </li> </ul> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../.. title=ReactPy-Django class="md-nav__button md-logo" aria-label=ReactPy-Django data-md-component=logo> <img src=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg alt=logo> </a> ReactPy-Django </label> <div class=md-nav__source> <a href=https://github.com/reactive-python/reactpy-django title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> ReactPy Django (GitHub) </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../.. class=md-nav__link> <span class=md-ellipsis> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Get Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Get Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../learn/add-reactpy-to-a-django-project/ class=md-nav__link> <span class=md-ellipsis> Add ReactPy to a Django Project </span> </a> </li> <li class=md-nav__item> <a href=../../learn/your-first-component/ class=md-nav__link> <span class=md-ellipsis> Your First Component </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3 checked> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <span class=md-ellipsis> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=true> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Hooks </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Hooks </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#overview class=md-nav__link> Overview </a> </li> <li class=md-nav__item> <a href=#database-hooks class=md-nav__link> Database Hooks </a> <nav class=md-nav aria-label="Database Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-query class=md-nav__link> Use Query </a> </li> <li class=md-nav__item> <a href=#use-mutation class=md-nav__link> Use Mutation </a> </li> <li class=md-nav__item> <a href=#use-user-data class=md-nav__link> Use User Data </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#communication-hooks class=md-nav__link> Communication Hooks </a> <nav class=md-nav aria-label="Communication Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-channel-layer class=md-nav__link> Use Channel Layer </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#connection-hooks class=md-nav__link> Connection Hooks </a> <nav class=md-nav aria-label="Connection Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-connection class=md-nav__link> Use Connection </a> </li> <li class=md-nav__item> <a href=#use-scope class=md-nav__link> Use Scope </a> </li> <li class=md-nav__item> <a href=#use-location class=md-nav__link> Use Location </a> </li> <li class=md-nav__item> <a href=#use-origin class=md-nav__link> Use Origin </a> </li> <li class=md-nav__item> <a href=#use-root-id class=md-nav__link> Use Root ID </a> </li> <li class=md-nav__item> <a href=#use-user class=md-nav__link> Use User </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../html/ class=md-nav__link> <span class=md-ellipsis> HTML </span> </a> </li> <li class=md-nav__item> <a href=../router/ class=md-nav__link> <span class=md-ellipsis> URL Router </span> </a> </li> <li class=md-nav__item> <a href=../decorators/ class=md-nav__link> <span class=md-ellipsis> Decorators </span> </a> </li> <li class=md-nav__item> <a href=../utils/ class=md-nav__link> <span class=md-ellipsis> Utilities </span> </a> </li> <li class=md-nav__item> <a href=../template-tag/ class=md-nav__link> <span class=md-ellipsis> Template Tag </span> </a> </li> <li class=md-nav__item> <a href=../settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../management-commands/ class=md-nav__link> <span class=md-ellipsis> Management Commands </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> About </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> About </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../about/changelog/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class=md-nav__item> <a href=../../about/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributor Guide </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Community </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> Community </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=https://github.com/reactive-python/reactpy-django/discussions class=md-nav__link> <span class=md-ellipsis> GitHub Discussions </span> </a> </li> <li class=md-nav__item> <a href=https://discord.gg/uNb5P4hA9X class=md-nav__link> <span class=md-ellipsis> Discord </span> </a> </li> <li class=md-nav__item> <a href=https://www.reddit.com/r/ReactPy/ class=md-nav__link> <span class=md-ellipsis> Reddit </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../about/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#overview class=md-nav__link> Overview </a> </li> <li class=md-nav__item> <a href=#database-hooks class=md-nav__link> Database Hooks </a> <nav class=md-nav aria-label="Database Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-query class=md-nav__link> Use Query </a> </li> <li class=md-nav__item> <a href=#use-mutation class=md-nav__link> Use Mutation </a> </li> <li class=md-nav__item> <a href=#use-user-data class=md-nav__link> Use User Data </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#communication-hooks class=md-nav__link> Communication Hooks </a> <nav class=md-nav aria-label="Communication Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-channel-layer class=md-nav__link> Use Channel Layer </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#connection-hooks class=md-nav__link> Connection Hooks </a> <nav class=md-nav aria-label="Connection Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-connection class=md-nav__link> Use Connection </a> </li> <li class=md-nav__item> <a href=#use-scope class=md-nav__link> Use Scope </a> </li> <li class=md-nav__item> <a href=#use-location class=md-nav__link> Use Location </a> </li> <li class=md-nav__item> <a href=#use-origin class=md-nav__link> Use Origin </a> </li> <li class=md-nav__item> <a href=#use-root-id class=md-nav__link> Use Root ID </a> </li> <li class=md-nav__item> <a href=#use-user class=md-nav__link> Use User </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <h1>Hooks</h1> <h2 id=overview>Overview<a class=headerlink href=#overview title="Permanent link">&para;</a></h2> <p class=intro> Prefabricated hooks can be used within your <code>components.py</code> to help simplify development. </p> <div class="admonition abstract"> <p class=admonition-title>Note</p> <p>Looking for standard React hooks?</p> <p>This package only contains Django specific hooks. Standard hooks can be found within <a href=https://reactpy.dev/docs/reference/hooks-api.html#basic-hooks><code>reactive-python/reactpy</code></a>.</p> </div> <hr> <h2 id=database-hooks>Database Hooks<a class=headerlink href=#database-hooks title="Permanent link">&para;</a></h2> <hr> <h3 id=use-query>Use Query<a class=headerlink href=#use-query title="Permanent link">&para;</a></h3> <p>Execute functions in the background and return the result, typically to <a href=https://www.sumologic.com/glossary/crud/ >read</a> data from the Django ORM.</p> <p>The <a href=../utils/#django-query-postprocessor>default postprocessor</a> expects your query function to <code class=highlight><span class=k>return</span></code> a Django <code class=highlight><span class=n>Model</span></code> or <code class=highlight><span class=n>QuerySet</span></code>. This needs to be changed or disabled to execute other types of queries.</p> <p>Query functions can be sync or async.</p> <div class="tabbed-set tabbed-alternate" data-tabs=1:2><input checked=checked id=__tabbed_1_1 name=__tabbed_1 type=radio><input id=__tabbed_1_2 name=__tabbed_1 type=radio><div class=tabbed-labels><label for=__tabbed_1_1>components.py</label><label for=__tabbed_1_2>models.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="It's React, but in Python. Now with Django integration."><meta name=author content=Archmonger><link href=https://reactive-python.github.io/reactpy-django/develop/reference/hooks/ rel=canonical><link href=../components/ rel=prev><link href=../html/ rel=next><link rel=icon href=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.4.0"><title>Hooks - ReactPy-Django</title><link rel=stylesheet href=../../assets/stylesheets/main.9f615399.min.css><link rel=stylesheet href=../../assets/stylesheets/palette.649f08f9.min.css><style>:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h224V368c0-26.5 21.5-48 48-48h112V96c0-35.3-28.7-64-64-64H64zm384 320H336c-8.8 0-16 7.2-16 16v112l32-32 64-64 32-32z"/></svg>');}</style><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style><link rel=stylesheet href=../../assets/css/main.css><link rel=stylesheet href=../../assets/css/button.css><link rel=stylesheet href=../../assets/css/admonition.css><link rel=stylesheet href=../../assets/css/banner.css><link rel=stylesheet href=../../assets/css/sidebar.css><link rel=stylesheet href=../../assets/css/navbar.css><link rel=stylesheet href=../../assets/css/table-of-contents.css><link rel=stylesheet href=../../assets/css/code.css><link rel=stylesheet href=../../assets/css/footer.css><link rel=stylesheet href=../../assets/css/home.css><script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script><script id=__analytics>function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-4KFQN2LWBG"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-4KFQN2LWBG",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-4KFQN2LWBG",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script><script>"undefined"!=typeof __md_analytics&&__md_analytics()</script></head> <body dir=ltr data-md-color-scheme=slate data-md-color-primary=red data-md-color-accent=red> <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#overview class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> <aside class="md-banner md-banner--warning"> <div class="md-banner__inner md-grid md-typeset"> You're not viewing the latest release. <a href=../../..> <strong>Click here to go to latest.</strong> </a> </div> <script>var el=document.querySelector("[data-md-component=outdated]"),outdated=__md_get("__outdated",sessionStorage);!0===outdated&&el&&(el.hidden=!1)</script> </aside> </div> <header class="md-header md-header--shadow md-header--lifted" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../.. title=ReactPy-Django class="md-header__button md-logo" aria-label=ReactPy-Django data-md-component=logo> <img src=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg alt=logo> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> ReactPy-Django </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Hooks </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=red data-md-color-accent=red aria-label="Switch to light mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_2 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m3.55 19.09 1.41 1.41 1.8-1.79-1.42-1.42M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6c0-3.32-2.69-6-6-6m8 7h3v-2h-3m-2.76 7.71 1.8 1.79 1.41-1.41-1.79-1.8M20.45 5l-1.41-1.4-1.8 1.79 1.42 1.42M13 1h-2v3h2M6.76 5.39 4.96 3.6 3.55 5l1.79 1.81 1.42-1.42M1 13h3v-2H1m12 9h-2v3h2"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=white data-md-color-accent=red aria-label="Switch to dark mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg> </label> </form> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </label> <nav class=md-search__options aria-label=Search> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg> </button> </nav> </form> <div class=md-search__output> <div class=md-search__scrollwrap data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/reactive-python/reactpy-django title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> ReactPy Django (GitHub) </div> </a> </div> </nav> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../.. class=md-tabs__link> Home </a> </li> <li class=md-tabs__item> <a href=../../learn/add-reactpy-to-a-django-project/ class=md-tabs__link> Get Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../components/ class=md-tabs__link> Reference </a> </li> <li class=md-tabs__item> <a href=../../about/changelog/ class=md-tabs__link> About </a> </li> </ul> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../.. title=ReactPy-Django class="md-nav__button md-logo" aria-label=ReactPy-Django data-md-component=logo> <img src=https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg alt=logo> </a> ReactPy-Django </label> <div class=md-nav__source> <a href=https://github.com/reactive-python/reactpy-django title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </div> <div class=md-source__repository> ReactPy Django (GitHub) </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../.. class=md-nav__link> <span class=md-ellipsis> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex=0> <span class=md-ellipsis> Get Started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Get Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../learn/add-reactpy-to-a-django-project/ class=md-nav__link> <span class=md-ellipsis> Add ReactPy to a Django Project </span> </a> </li> <li class=md-nav__item> <a href=../../learn/your-first-component/ class=md-nav__link> <span class=md-ellipsis> Your First Component </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3 checked> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <span class=md-ellipsis> Reference </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=true> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Reference </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../components/ class=md-nav__link> <span class=md-ellipsis> Components </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Hooks </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Hooks </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#overview class=md-nav__link> Overview </a> </li> <li class=md-nav__item> <a href=#database-hooks class=md-nav__link> Database Hooks </a> <nav class=md-nav aria-label="Database Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-query class=md-nav__link> Use Query </a> </li> <li class=md-nav__item> <a href=#use-mutation class=md-nav__link> Use Mutation </a> </li> <li class=md-nav__item> <a href=#use-user-data class=md-nav__link> Use User Data </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#communication-hooks class=md-nav__link> Communication Hooks </a> <nav class=md-nav aria-label="Communication Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-channel-layer class=md-nav__link> Use Channel Layer </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#connection-hooks class=md-nav__link> Connection Hooks </a> <nav class=md-nav aria-label="Connection Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-connection class=md-nav__link> Use Connection </a> </li> <li class=md-nav__item> <a href=#use-scope class=md-nav__link> Use Scope </a> </li> <li class=md-nav__item> <a href=#use-location class=md-nav__link> Use Location </a> </li> <li class=md-nav__item> <a href=#use-origin class=md-nav__link> Use Origin </a> </li> <li class=md-nav__item> <a href=#use-root-id class=md-nav__link> Use Root ID </a> </li> <li class=md-nav__item> <a href=#use-user class=md-nav__link> Use User </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../html/ class=md-nav__link> <span class=md-ellipsis> HTML </span> </a> </li> <li class=md-nav__item> <a href=../router/ class=md-nav__link> <span class=md-ellipsis> URL Router </span> </a> </li> <li class=md-nav__item> <a href=../decorators/ class=md-nav__link> <span class=md-ellipsis> Decorators </span> </a> </li> <li class=md-nav__item> <a href=../utils/ class=md-nav__link> <span class=md-ellipsis> Utilities </span> </a> </li> <li class=md-nav__item> <a href=../template-tag/ class=md-nav__link> <span class=md-ellipsis> Template Tag </span> </a> </li> <li class=md-nav__item> <a href=../settings/ class=md-nav__link> <span class=md-ellipsis> Settings </span> </a> </li> <li class=md-nav__item> <a href=../management-commands/ class=md-nav__link> <span class=md-ellipsis> Management Commands </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> About </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> About </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../about/changelog/ class=md-nav__link> <span class=md-ellipsis> Changelog </span> </a> </li> <li class=md-nav__item> <a href=../../about/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributor Guide </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_4_3> <label class=md-nav__link for=__nav_4_3 id=__nav_4_3_label tabindex=0> <span class=md-ellipsis> Community </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_4_3_label aria-expanded=false> <label class=md-nav__title for=__nav_4_3> <span class="md-nav__icon md-icon"></span> Community </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=https://github.com/reactive-python/reactpy-django/discussions class=md-nav__link> <span class=md-ellipsis> GitHub Discussions </span> </a> </li> <li class=md-nav__item> <a href=https://discord.gg/uNb5P4hA9X class=md-nav__link> <span class=md-ellipsis> Discord </span> </a> </li> <li class=md-nav__item> <a href=https://www.reddit.com/r/ReactPy/ class=md-nav__link> <span class=md-ellipsis> Reddit </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../about/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component=sidebar data-md-type=toc> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#overview class=md-nav__link> Overview </a> </li> <li class=md-nav__item> <a href=#database-hooks class=md-nav__link> Database Hooks </a> <nav class=md-nav aria-label="Database Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-query class=md-nav__link> Use Query </a> </li> <li class=md-nav__item> <a href=#use-mutation class=md-nav__link> Use Mutation </a> </li> <li class=md-nav__item> <a href=#use-user-data class=md-nav__link> Use User Data </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#communication-hooks class=md-nav__link> Communication Hooks </a> <nav class=md-nav aria-label="Communication Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-channel-layer class=md-nav__link> Use Channel Layer </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#connection-hooks class=md-nav__link> Connection Hooks </a> <nav class=md-nav aria-label="Connection Hooks"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#use-connection class=md-nav__link> Use Connection </a> </li> <li class=md-nav__item> <a href=#use-scope class=md-nav__link> Use Scope </a> </li> <li class=md-nav__item> <a href=#use-location class=md-nav__link> Use Location </a> </li> <li class=md-nav__item> <a href=#use-origin class=md-nav__link> Use Origin </a> </li> <li class=md-nav__item> <a href=#use-root-id class=md-nav__link> Use Root ID </a> </li> <li class=md-nav__item> <a href=#use-user class=md-nav__link> Use User </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <h1>Hooks</h1> <h2 id=overview>Overview<a class=headerlink href=#overview title="Permanent link">&para;</a></h2> <p class=intro> Prefabricated hooks can be used within your <code>components.py</code> to help simplify development. </p> <div class="admonition abstract"> <p class=admonition-title>Note</p> <p>Looking for standard React hooks?</p> <p>This package only contains Django specific hooks. Standard hooks can be found within <a href=https://reactpy.dev/docs/reference/hooks-api.html#basic-hooks><code>reactive-python/reactpy</code></a>.</p> </div> <hr> <h2 id=database-hooks>Database Hooks<a class=headerlink href=#database-hooks title="Permanent link">&para;</a></h2> <hr> <h3 id=use-query>Use Query<a class=headerlink href=#use-query title="Permanent link">&para;</a></h3> <p>Execute functions in the background and return the result, typically to <a href=https://www.sumologic.com/glossary/crud/ >read</a> data from the Django ORM.</p> <p>The <a href=../utils/#django-query-postprocessor>default postprocessor</a> expects your query function to <code class=highlight><span class=k>return</span></code> a Django <code class=highlight><span class=n>Model</span></code> or <code class=highlight><span class=n>QuerySet</span></code>. This needs <a href=../settings/#reactpy_default_query_postprocessor>to be changed</a> or disabled to execute other types of queries.</p> <p>Query functions can be sync or async.</p> <div class="tabbed-set tabbed-alternate" data-tabs=1:2><input checked=checked id=__tabbed_1_1 name=__tabbed_1 type=radio><input id=__tabbed_1_2 name=__tabbed_1 type=radio><div class=tabbed-labels><label for=__tabbed_1_1>components.py</label><label for=__tabbed_1_2>models.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
 <span class=normal> 2</span>
 <span class=normal> 3</span>
 <span class=normal> 4</span>
@@ -20,10 +20,10 @@
 <span class=normal>20</span>
 <span class=normal>21</span>
 <span class=normal>22</span>
-<span class=normal>23</span>
-<span class=normal>24</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>channels.db</span> <span class=kn>import</span> <span class=n>database_sync_to_async</span>
-<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
+<span class=normal>23</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>channels.db</span> <span class=kn>import</span> <span class=n>database_sync_to_async</span>
 <span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 
 
@@ -40,9 +40,7 @@
     <span class=k>elif</span> <span class=n>item_query</span><span class=o>.</span><span class=n>error</span> <span class=ow>or</span> <span class=ow>not</span> <span class=n>item_query</span><span class=o>.</span><span class=n>data</span><span class=p>:</span>
         <span class=n>rendered_items</span> <span class=o>=</span> <span class=n>html</span><span class=o>.</span><span class=n>h2</span><span class=p>(</span><span class=s2>&quot;Error when loading!&quot;</span><span class=p>)</span>
     <span class=k>else</span><span class=p>:</span>
-        <span class=n>rendered_items</span> <span class=o>=</span> <span class=n>html</span><span class=o>.</span><span class=n>ul</span><span class=p>(</span>
-            <span class=p>[</span><span class=n>html</span><span class=o>.</span><span class=n>li</span><span class=p>(</span><span class=n>item</span><span class=o>.</span><span class=n>text</span><span class=p>,</span> <span class=n>key</span><span class=o>=</span><span class=n>item</span><span class=o>.</span><span class=n>pk</span><span class=p>)</span> <span class=k>for</span> <span class=n>item</span> <span class=ow>in</span> <span class=n>item_query</span><span class=o>.</span><span class=n>data</span><span class=p>]</span>
-        <span class=p>)</span>
+        <span class=n>rendered_items</span> <span class=o>=</span> <span class=n>html</span><span class=o>.</span><span class=n>ul</span><span class=p>([</span><span class=n>html</span><span class=o>.</span><span class=n>li</span><span class=p>(</span><span class=n>item</span><span class=o>.</span><span class=n>text</span><span class=p>,</span> <span class=n>key</span><span class=o>=</span><span class=n>item</span><span class=o>.</span><span class=n>pk</span><span class=p>)</span> <span class=k>for</span> <span class=n>item</span> <span class=ow>in</span> <span class=n>item_query</span><span class=o>.</span><span class=n>data</span><span class=p>])</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=s2>&quot;Rendered items: &quot;</span><span class=p>,</span> <span class=n>rendered_items</span><span class=p>)</span>
 </code></pre></div></td></tr></table></div> </div> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
@@ -65,7 +63,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span>
-<span class=normal>12</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+<span class=normal>12</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 
 
@@ -94,12 +94,12 @@
 <span class=normal>15</span>
 <span class=normal>16</span>
 <span class=normal>17</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 
 
 <span class=k>def</span> <span class=nf>execute_thread_safe_operation</span><span class=p>():</span>
 <span class=w>    </span><span class=sd>&quot;&quot;&quot;This is an example query function that does some thread-safe operation.&quot;&quot;&quot;</span>
-    <span class=k>pass</span>
 
 
 <span class=nd>@component</span>
@@ -130,12 +130,12 @@
 <span class=normal>18</span>
 <span class=normal>19</span>
 <span class=normal>20</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 
 
 <span class=k>def</span> <span class=nf>execute_io_intensive_operation</span><span class=p>():</span>
 <span class=w>    </span><span class=sd>&quot;&quot;&quot;This is an example query function that does something IO intensive.&quot;&quot;&quot;</span>
-    <span class=k>pass</span>
 
 
 <span class=nd>@component</span>
@@ -177,6 +177,7 @@
 <span class=normal>26</span>
 <span class=normal>27</span>
 <span class=normal>28</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 
 
@@ -189,7 +190,6 @@
 
 <span class=k>def</span> <span class=nf>execute_io_intensive_operation</span><span class=p>():</span>
 <span class=w>    </span><span class=sd>&quot;&quot;&quot;This is an example query function that does something IO intensive.&quot;&quot;&quot;</span>
-    <span class=k>pass</span>
 
 
 <span class=nd>@component</span>
@@ -231,8 +231,10 @@
 <span class=normal>25</span>
 <span class=normal>26</span>
 <span class=normal>27</span>
-<span class=normal>28</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+<span class=normal>28</span>
+<span class=normal>29</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 
 
@@ -290,8 +292,10 @@
 <span class=normal>29</span>
 <span class=normal>30</span>
 <span class=normal>31</span>
-<span class=normal>32</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>32</span>
+<span class=normal>33</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_mutation</span>
 
 
@@ -359,8 +363,10 @@
 <span class=normal>26</span>
 <span class=normal>27</span>
 <span class=normal>28</span>
-<span class=normal>29</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>29</span>
+<span class=normal>30</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_mutation</span>
 
 
@@ -409,14 +415,12 @@
 <span class=normal>10</span>
 <span class=normal>11</span>
 <span class=normal>12</span>
-<span class=normal>13</span>
-<span class=normal>14</span>
-<span class=normal>15</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+<span class=normal>13</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_mutation</span>
 
 
-<span class=k>def</span> <span class=nf>example_mutation</span><span class=p>(</span><span class=n>value</span><span class=p>:</span> <span class=nb>int</span><span class=p>,</span> <span class=n>other_value</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>False</span><span class=p>):</span>
-    <span class=o>...</span>
+<span class=k>def</span> <span class=nf>example_mutation</span><span class=p>(</span><span class=n>value</span><span class=p>:</span> <span class=nb>int</span><span class=p>,</span> <span class=n>other_value</span><span class=p>:</span> <span class=nb>bool</span> <span class=o>=</span> <span class=kc>False</span><span class=p>):</span> <span class=o>...</span>
 
 
 <span class=nd>@component</span>
@@ -424,8 +428,6 @@
     <span class=n>mutation</span> <span class=o>=</span> <span class=n>use_mutation</span><span class=p>(</span><span class=n>example_mutation</span><span class=p>)</span>
 
     <span class=n>mutation</span><span class=p>(</span><span class=mi>123</span><span class=p>,</span> <span class=n>other_value</span><span class=o>=</span><span class=kc>True</span><span class=p>)</span>
-
-    <span class=o>...</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> </details> <details class=question> <summary>How can I customize this hook's behavior?</summary> <p>This hook has several parameters that can be used to customize behavior.</p> <p>Below are examples of values that can be modified.</p> <hr> <p><font size=4><strong><code class=highlight><span class=n>thread_sensitive</span></code></strong></font></p> <p>Whether to run your synchronous mutation function in thread sensitive mode. Thread sensitive mode is turned on by default due to Django ORM limitations. See Django's <a href=https://docs.djangoproject.com/en/stable/topics/async/#sync-to-async><code>sync_to_async</code> docs</a> docs for more information.</p> <p>This setting only applies to sync query functions, and will be ignored for async functions.</p> <div class="tabbed-set tabbed-alternate" data-tabs=10:1><input checked=checked id=__tabbed_10_1 name=__tabbed_10 type=radio><div class=tabbed-labels><label for=__tabbed_10_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
 <span class=normal> 2</span>
 <span class=normal> 3</span>
@@ -457,12 +459,12 @@
 <span class=normal>29</span>
 <span class=normal>30</span>
 <span class=normal>31</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_mutation</span>
 
 
 <span class=k>def</span> <span class=nf>execute_thread_safe_mutation</span><span class=p>(</span><span class=n>text</span><span class=p>):</span>
 <span class=w>    </span><span class=sd>&quot;&quot;&quot;This is an example mutation function that does some thread-safe operation.&quot;&quot;&quot;</span>
-    <span class=k>pass</span>
 
 
 <span class=nd>@component</span>
@@ -518,8 +520,10 @@
 <span class=normal>29</span>
 <span class=normal>30</span>
 <span class=normal>31</span>
-<span class=normal>32</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>32</span>
+<span class=normal>33</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_mutation</span>
 
 
@@ -603,9 +607,9 @@
 <span class=normal>42</span>
 <span class=normal>43</span>
 <span class=normal>44</span>
-<span class=normal>45</span>
-<span class=normal>46</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>45</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_mutation</span><span class=p>,</span> <span class=n>use_query</span>
 
 
@@ -632,9 +636,7 @@
     <span class=k>elif</span> <span class=n>item_query</span><span class=o>.</span><span class=n>error</span> <span class=ow>or</span> <span class=ow>not</span> <span class=n>item_query</span><span class=o>.</span><span class=n>data</span><span class=p>:</span>
         <span class=n>rendered_items</span> <span class=o>=</span> <span class=n>html</span><span class=o>.</span><span class=n>h2</span><span class=p>(</span><span class=s2>&quot;Error when loading!&quot;</span><span class=p>)</span>
     <span class=k>else</span><span class=p>:</span>
-        <span class=n>rendered_items</span> <span class=o>=</span> <span class=n>html</span><span class=o>.</span><span class=n>ul</span><span class=p>(</span>
-            <span class=n>html</span><span class=o>.</span><span class=n>li</span><span class=p>(</span><span class=n>item</span><span class=o>.</span><span class=n>text</span><span class=p>,</span> <span class=n>key</span><span class=o>=</span><span class=n>item</span><span class=o>.</span><span class=n>pk</span><span class=p>)</span> <span class=k>for</span> <span class=n>item</span> <span class=ow>in</span> <span class=n>item_query</span><span class=o>.</span><span class=n>data</span>
-        <span class=p>)</span>
+        <span class=n>rendered_items</span> <span class=o>=</span> <span class=n>html</span><span class=o>.</span><span class=n>ul</span><span class=p>(</span><span class=n>html</span><span class=o>.</span><span class=n>li</span><span class=p>(</span><span class=n>item</span><span class=o>.</span><span class=n>text</span><span class=p>,</span> <span class=n>key</span><span class=o>=</span><span class=n>item</span><span class=o>.</span><span class=n>pk</span><span class=p>)</span> <span class=k>for</span> <span class=n>item</span> <span class=ow>in</span> <span class=n>item_query</span><span class=o>.</span><span class=n>data</span><span class=p>)</span>
 
     <span class=c1># Handle all possible mutation states</span>
     <span class=k>if</span> <span class=n>item_mutation</span><span class=o>.</span><span class=n>loading</span><span class=p>:</span>
@@ -677,7 +679,9 @@
 <span class=normal>16</span>
 <span class=normal>17</span>
 <span class=normal>18</span>
-<span class=normal>19</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>19</span>
+<span class=normal>20</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_user_data</span>
 
 
@@ -720,7 +724,9 @@
 <span class=normal>22</span>
 <span class=normal>23</span>
 <span class=normal>24</span>
-<span class=normal>25</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>25</span>
+<span class=normal>26</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_user_data</span>
 
 
@@ -766,7 +772,9 @@
 <span class=normal>19</span>
 <span class=normal>20</span>
 <span class=normal>21</span>
-<span class=normal>22</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>hooks</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>22</span>
+<span class=normal>23</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>hooks</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_channel_layer</span>
 
 
@@ -836,7 +844,9 @@
 <span class=normal>37</span>
 <span class=normal>38</span>
 <span class=normal>39</span>
-<span class=normal>40</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>hooks</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>40</span>
+<span class=normal>41</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>hooks</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_channel_layer</span>
 
 
@@ -926,7 +936,9 @@
 <span class=normal>11</span>
 <span class=normal>12</span>
 <span class=normal>13</span>
-<span class=normal>14</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>hooks</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>14</span>
+<span class=normal>15</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>hooks</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_channel_layer</span>
 
 
@@ -940,15 +952,17 @@
     <span class=n>use_channel_layer</span><span class=p>(</span><span class=s2>&quot;my-channel-name&quot;</span><span class=p>,</span> <span class=n>receiver</span><span class=o>=</span><span class=n>receive_event</span><span class=p>)</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Message Receiver: </span><span class=si>{</span><span class=n>message</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> </details> <hr> <h2 id=connection-hooks>Connection Hooks<a class=headerlink href=#connection-hooks title="Permanent link">&para;</a></h2> <hr> <h3 id=use-connection>Use Connection<a class=headerlink href=#use-connection title="Permanent link">&para;</a></h3> <p>Returns the active connection, which is either a Django <a href=https://channels.readthedocs.io/en/stable/topics/consumers.html#asyncjsonwebsocketconsumer>WebSocket</a> or a <a href=https://docs.djangoproject.com/en/4.2/ref/request-response/#django.http.HttpRequest>HTTP Request</a>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=18:1><input checked=checked id=__tabbed_18_1 name=__tabbed_18 type=radio><div class=tabbed-labels><label for=__tabbed_18_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> </details> <hr> <h2 id=connection-hooks>Connection Hooks<a class=headerlink href=#connection-hooks title="Permanent link">&para;</a></h2> <hr> <h3 id=use-connection>Use Connection<a class=headerlink href=#use-connection title="Permanent link">&para;</a></h3> <p>Returns the active connection, which is either a Django <a href=https://channels.readthedocs.io/en/stable/topics/consumers.html#asyncjsonwebsocketconsumer>WebSocket</a> or a <a href=https://docs.djangoproject.com/en/4.2/ref/request-response/#django.http.HttpRequest>HTTP Request</a>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=18:1><input checked=checked id=__tabbed_18_1 name=__tabbed_18 type=radio><div class=tabbed-labels><label for=__tabbed_18_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_connection</span>
 
 
@@ -957,15 +971,17 @@
     <span class=n>connection</span> <span class=o>=</span> <span class=n>use_connection</span><span class=p>()</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=nb>str</span><span class=p>(</span><span class=n>connection</span><span class=p>))</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>Connection</span></code></td> <td>An object that contains a <code>carrier</code> (<code>WebSocket</code> or <code>HttpRequest</code>), <code>scope</code>, and <code>location</code>.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-scope>Use Scope<a class=headerlink href=#use-scope title="Permanent link">&para;</a></h3> <p>Shortcut that returns the WebSocket or HTTP connection's <a href=https://channels.readthedocs.io/en/stable/topics/consumers.html#scope>scope</a>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=19:1><input checked=checked id=__tabbed_19_1 name=__tabbed_19 type=radio><div class=tabbed-labels><label for=__tabbed_19_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>Connection</span></code></td> <td>An object that contains a <code>carrier</code> (<code>WebSocket</code> or <code>HttpRequest</code>), <code>scope</code>, and <code>location</code>.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-scope>Use Scope<a class=headerlink href=#use-scope title="Permanent link">&para;</a></h3> <p>Shortcut that returns the WebSocket or HTTP connection's <a href=https://channels.readthedocs.io/en/stable/topics/consumers.html#scope>scope</a>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=19:1><input checked=checked id=__tabbed_19_1 name=__tabbed_19 type=radio><div class=tabbed-labels><label for=__tabbed_19_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_scope</span>
 
 
@@ -974,15 +990,17 @@
     <span class=n>scope</span> <span class=o>=</span> <span class=n>use_scope</span><span class=p>()</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=nb>str</span><span class=p>(</span><span class=n>scope</span><span class=p>))</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>MutableMapping</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]</span></code></td> <td>The connection's <code class=highlight><span class=n>scope</span></code>.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-location>Use Location<a class=headerlink href=#use-location title="Permanent link">&para;</a></h3> <p>Shortcut that returns the browser's current <code class=highlight><span class=n>Location</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=20:1><input checked=checked id=__tabbed_20_1 name=__tabbed_20 type=radio><div class=tabbed-labels><label for=__tabbed_20_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>MutableMapping</span><span class=p>[</span><span class=nb>str</span><span class=p>,</span> <span class=n>Any</span><span class=p>]</span></code></td> <td>The connection's <code class=highlight><span class=n>scope</span></code>.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-location>Use Location<a class=headerlink href=#use-location title="Permanent link">&para;</a></h3> <p>Shortcut that returns the browser's current <code class=highlight><span class=n>Location</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=20:1><input checked=checked id=__tabbed_20_1 name=__tabbed_20 type=radio><div class=tabbed-labels><label for=__tabbed_20_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_location</span>
 
 
@@ -991,15 +1009,17 @@
     <span class=n>location</span> <span class=o>=</span> <span class=n>use_location</span><span class=p>()</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=n>location</span><span class=o>.</span><span class=n>pathname</span> <span class=o>+</span> <span class=n>location</span><span class=o>.</span><span class=n>search</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>Location</span></code></td> <td>An object containing the current URL's <code class=highlight><span class=n>pathname</span></code> and <code class=highlight><span class=n>search</span></code> query.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-origin>Use Origin<a class=headerlink href=#use-origin title="Permanent link">&para;</a></h3> <p>Shortcut that returns the WebSocket or HTTP connection's <code class=highlight><span class=n>origin</span></code>.</p> <p>You can expect this hook to provide strings such as <code>http://example.com</code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=21:1><input checked=checked id=__tabbed_21_1 name=__tabbed_21 type=radio><div class=tabbed-labels><label for=__tabbed_21_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>Location</span></code></td> <td>An object containing the current URL's <code class=highlight><span class=n>pathname</span></code> and <code class=highlight><span class=n>search</span></code> query.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-origin>Use Origin<a class=headerlink href=#use-origin title="Permanent link">&para;</a></h3> <p>Shortcut that returns the WebSocket or HTTP connection's <code class=highlight><span class=n>origin</span></code>.</p> <p>You can expect this hook to provide strings such as <code>http://example.com</code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=21:1><input checked=checked id=__tabbed_21_1 name=__tabbed_21 type=radio><div class=tabbed-labels><label for=__tabbed_21_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_origin</span>
 
 
@@ -1008,15 +1028,17 @@
     <span class=n>origin</span> <span class=o>=</span> <span class=n>use_origin</span><span class=p>()</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=n>origin</span> <span class=ow>or</span> <span class=s2>&quot;No origin&quot;</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=nb>str</span> <span class=o>|</span> <span class=kc>None</span></code></td> <td>A string containing the browser's current origin, obtained from WebSocket or HTTP headers (if available).</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-root-id>Use Root ID<a class=headerlink href=#use-root-id title="Permanent link">&para;</a></h3> <p>Shortcut that returns the root component's <code class=highlight><span class=nb>id</span></code> from the WebSocket or HTTP connection.</p> <p>The root ID is a randomly generated <code class=highlight><span class=n>uuid4</span></code>. It is notable to mention that it is persistent across the current connection. The <code>uuid</code> is reset when the page is refreshed.</p> <p>This is useful when used in combination with <a href=#use-channel-layer><code class=highlight><span class=n>use_channel_layer</span></code></a> to send messages to a specific component instance, and/or retain a backlog of messages in case that component is disconnected via <code class=highlight><span class=n>use_channel_layer</span><span class=p>(</span> <span class=o>...</span> <span class=p>,</span> <span class=n>group_discard</span><span class=o>=</span><span class=kc>False</span><span class=p>)</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=22:1><input checked=checked id=__tabbed_22_1 name=__tabbed_22 type=radio><div class=tabbed-labels><label for=__tabbed_22_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=nb>str</span> <span class=o>|</span> <span class=kc>None</span></code></td> <td>A string containing the browser's current origin, obtained from WebSocket or HTTP headers (if available).</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-root-id>Use Root ID<a class=headerlink href=#use-root-id title="Permanent link">&para;</a></h3> <p>Shortcut that returns the root component's <code class=highlight><span class=nb>id</span></code> from the WebSocket or HTTP connection.</p> <p>The root ID is a randomly generated <code class=highlight><span class=n>uuid4</span></code>. It is notable to mention that it is persistent across the current connection. The <code>uuid</code> is reset when the page is refreshed.</p> <p>This is useful when used in combination with <a href=#use-channel-layer><code class=highlight><span class=n>use_channel_layer</span></code></a> to send messages to a specific component instance, and/or retain a backlog of messages in case that component is disconnected via <code class=highlight><span class=n>use_channel_layer</span><span class=p>(</span> <span class=o>...</span> <span class=p>,</span> <span class=n>group_discard</span><span class=o>=</span><span class=kc>False</span><span class=p>)</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=22:1><input checked=checked id=__tabbed_22_1 name=__tabbed_22 type=radio><div class=tabbed-labels><label for=__tabbed_22_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_root_id</span>
 
 
@@ -1025,15 +1047,17 @@
     <span class=n>root_id</span> <span class=o>=</span> <span class=n>use_root_id</span><span class=p>()</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=sa>f</span><span class=s2>&quot;Root ID: </span><span class=si>{</span><span class=n>root_id</span><span class=si>}</span><span class=s2>&quot;</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=nb>str</span></code></td> <td>A string containing the root component's <code class=highlight><span class=nb>id</span></code>.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-user>Use User<a class=headerlink href=#use-user title="Permanent link">&para;</a></h3> <p>Shortcut that returns the WebSocket or HTTP connection's <code class=highlight><span class=n>User</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=23:1><input checked=checked id=__tabbed_23_1 name=__tabbed_23 type=radio><div class=tabbed-labels><label for=__tabbed_23_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=nb>str</span></code></td> <td>A string containing the root component's <code class=highlight><span class=nb>id</span></code>.</td> </tr> </tbody> </table> </details> <hr> <h3 id=use-user>Use User<a class=headerlink href=#use-user title="Permanent link">&para;</a></h3> <p>Shortcut that returns the WebSocket or HTTP connection's <code class=highlight><span class=n>User</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=23:1><input checked=checked id=__tabbed_23_1 name=__tabbed_23 type=radio><div class=tabbed-labels><label for=__tabbed_23_1>components.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_user</span>
 
 
@@ -1042,4 +1066,4 @@
     <span class=n>user</span> <span class=o>=</span> <span class=n>use_user</span><span class=p>()</span>
 
     <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=n>user</span><span class=o>.</span><span class=n>username</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>AbstractUser</span></code></td> <td>A Django <code class=highlight><span class=n>User</span></code>, which can also be an <code class=highlight><span class=n>AnonymousUser</span></code>.</td> </tr> </tbody> </table> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 22, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>AbstractUser</span></code></td> <td>A Django <code class=highlight><span class=n>User</span></code>, which can also be an <code class=highlight><span class=n>AnonymousUser</span></code>.</td> </tr> </tbody> </table> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/html/index.html b/develop/reference/html/index.html
index 0535ebc8..88f400aa 100644
--- a/develop/reference/html/index.html
+++ b/develop/reference/html/index.html
@@ -12,7 +12,9 @@
 <span class=normal>12</span>
 <span class=normal>13</span>
 <span class=normal>14</span>
-<span class=normal>15</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+<span class=normal>15</span>
+<span class=normal>16</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.html</span> <span class=kn>import</span> <span class=n>pyscript</span>
 
 <span class=n>example_source_code</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
@@ -65,4 +67,4 @@
 <span class=x>    &lt;title&gt;ReactPy&lt;/title&gt;</span>
 <span class=x>    </span><span class=cp>{%</span> <span class=k>pyscript_setup</span> <span class=cp>%}</span>
 <span class=x>&lt;/head&gt;</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 22, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </div> </div> </div> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/router/index.html b/develop/reference/router/index.html
index 0c8b5a5a..c1ad7fb2 100644
--- a/develop/reference/router/index.html
+++ b/develop/reference/router/index.html
@@ -18,10 +18,12 @@
 <span class=normal>15</span>
 <span class=normal>16</span>
 <span class=normal>17</span>
-<span class=normal>18</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.router</span> <span class=kn>import</span> <span class=n>django_router</span>
+<span class=normal>18</span>
+<span class=normal>19</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 <span class=kn>from</span> <span class=nn>reactpy_router</span> <span class=kn>import</span> <span class=n>route</span>
 
+<span class=kn>from</span> <span class=nn>reactpy_django.router</span> <span class=kn>import</span> <span class=n>django_router</span>
+
 
 <span class=nd>@component</span>
 <span class=k>def</span> <span class=nf>my_component</span><span class=p>():</span>
@@ -36,4 +38,4 @@
         <span class=n>route</span><span class=p>(</span><span class=s2>&quot;/router/two_values/&lt;int:value&gt;/&lt;str:value2&gt;/&quot;</span><span class=p>,</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=s2>&quot;Example 8&quot;</span><span class=p>)),</span>
         <span class=n>route</span><span class=p>(</span><span class=s2>&quot;/router/*&quot;</span><span class=p>,</span> <span class=n>html</span><span class=o>.</span><span class=n>div</span><span class=p>(</span><span class=s2>&quot;Fallback&quot;</span><span class=p>)),</span>
     <span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=o>*</span><span class=n>routes</span></code></td> <td><code class=highlight><span class=n>Route</span></code></td> <td>An object from <code>reactpy-router</code> containing a <code class=highlight><span class=n>path</span></code>, <code class=highlight><span class=n>element</span></code>, and child <code class=highlight><span class=o>*</span><span class=n>routes</span></code>.</td> <td>N/A</td> </tr> </tbody> </table> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>VdomDict</span> <span class=o>|</span> <span class=kc>None</span></code></td> <td>The matched component/path after it has been fully rendered.</td> </tr> </tbody> </table> </details> <details class=question> <summary>How is this different from <code class=highlight><span class=n>reactpy_router</span><span class=o>.</span><span class=n>browser_router</span></code>?</summary> <p>The <code>django_router</code> component utilizes the same internals as <code>browser_router</code>, but provides a more Django-like URL routing syntax.</p> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">November 25, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=o>*</span><span class=n>routes</span></code></td> <td><code class=highlight><span class=n>Route</span></code></td> <td>An object from <code>reactpy-router</code> containing a <code class=highlight><span class=n>path</span></code>, <code class=highlight><span class=n>element</span></code>, and child <code class=highlight><span class=o>*</span><span class=n>routes</span></code>.</td> <td>N/A</td> </tr> </tbody> </table> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>VdomDict</span> <span class=o>|</span> <span class=kc>None</span></code></td> <td>The matched component/path after it has been fully rendered.</td> </tr> </tbody> </table> </details> <details class=question> <summary>How is this different from <code class=highlight><span class=n>reactpy_router</span><span class=o>.</span><span class=n>browser_router</span></code>?</summary> <p>The <code>django_router</code> component utilizes the same internals as <code>browser_router</code>, but provides a more Django-like URL routing syntax.</p> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/settings/index.html b/develop/reference/settings/index.html
index 1e66dd4a..bc1942a6 100644
--- a/develop/reference/settings/index.html
+++ b/develop/reference/settings/index.html
@@ -2,4 +2,4 @@
     <span class=k>del</span> <span class=n>data</span><span class=p>[</span><span class=s2>&quot;foo&quot;</span><span class=p>]</span>
     <span class=k>return</span> <span class=n>data</span>
 </code></pre></div> <p>Set <code class=highlight><span class=n>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</span></code> to <code class=highlight><span class=kc>None</span></code> to disable the default postprocessor.</p> <hr> <h3 id=reactpy_auth_backend><code class=highlight><span class=n>REACTPY_AUTH_BACKEND</span></code><a class=headerlink href=#reactpy_auth_backend title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=s2>&quot;django.contrib.auth.backends.ModelBackend&quot;</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=s2>&quot;example_project.auth.MyModelBackend&quot;</span></code></p> <p>Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:</p> <ol> <li>You are using <code class=highlight><span class=n>settings</span><span class=o>.</span><span class=n>py</span><span class=p>:</span><span class=n>REACTPY_AUTO_RELOGIN</span><span class=o>=</span><span class=kc>True</span></code> and...</li> <li>You are using <code class=highlight><span class=n>AuthMiddlewareStack</span></code> and...</li> <li>You are using Django's <code class=highlight><span class=n>AUTHENTICATION_BACKENDS</span></code> setting and...</li> <li>Your Django user model does not define a <code class=highlight><span class=n>backend</span></code> attribute.</li> </ol> <hr> <h3 id=reactpy_auto_relogin><code class=highlight><span class=n>REACTPY_AUTO_RELOGIN</span></code><a class=headerlink href=#reactpy_auto_relogin title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Enabling this will cause component WebSocket connections to automatically <a href=https://channels.readthedocs.io/en/latest/topics/authentication.html#how-to-log-a-user-in-out>re-login</a> users that are already authenticated.</p> <p>This is useful to continuously update <code class=highlight><span class=n>last_login</span></code> timestamps and refresh the <a href=https://docs.djangoproject.com/en/stable/topics/http/sessions/ >Django login session</a>.</p> <hr> <h2 id=performance-settings>Performance Settings<a class=headerlink href=#performance-settings title="Permanent link">&para;</a></h2> <hr> <h3 id=reactpy_database><code class=highlight><span class=n>REACTPY_DATABASE</span></code><a class=headerlink href=#reactpy_database title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=s2>&quot;default&quot;</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=s2>&quot;my-reactpy-database&quot;</span></code></p> <p>Multiprocessing-safe database used by ReactPy for database-backed hooks and features.</p> <p>If configuring this value, it is mandatory to configure Django to use the ReactPy database router:</p> <div class="tabbed-set tabbed-alternate" data-tabs=1:1><input checked=checked id=__tabbed_1_1 name=__tabbed_1 type=radio><div class=tabbed-labels><label for=__tabbed_1_1>settings.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><pre><span></span><code><span class=n>DATABASE_ROUTERS</span> <span class=o>=</span> <span class=p>[</span><span class=s2>&quot;reactpy_django.database.Router&quot;</span><span class=p>,</span> <span class=o>...</span><span class=p>]</span>
-</code></pre></div> </div> </div> </div> <hr> <h3 id=reactpy_cache><code class=highlight><span class=n>REACTPY_CACHE</span></code><a class=headerlink href=#reactpy_cache title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=s2>&quot;default&quot;</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=s2>&quot;my-reactpy-cache&quot;</span></code></p> <p>Cache used by ReactPy, typically for caching disk operations.</p> <p>We recommend using <a href=https://docs.djangoproject.com/en/stable/topics/cache/#redis><code>redis</code></a>, <a href=https://docs.djangoproject.com/en/stable/topics/cache/#memcached><code>memcache</code></a>, or <a href=https://docs.djangoproject.com/en/stable/topics/cache/#local-memory-caching><code>local-memory caching</code></a>.</p> <hr> <h3 id=reactpy_backhaul_thread><code class=highlight><span class=n>REACTPY_BACKHAUL_THREAD</span></code><a class=headerlink href=#reactpy_backhaul_thread title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Configures whether ReactPy components are rendered in a dedicated thread.</p> <p>This allows the web server to process other traffic during ReactPy rendering. Vastly improves throughput with web servers such as <a href=https://github.com/pgjones/hypercorn><code>hypercorn</code></a> and <a href=https://www.uvicorn.org/ ><code>uvicorn</code></a>.</p> <p>This setting is incompatible with <a href=https://github.com/django/daphne><code>daphne</code></a>.</p> <hr> <h3 id=reactpy_async_rendering><code class=highlight><span class=n>REACTPY_ASYNC_RENDERING</span></code><a class=headerlink href=#reactpy_async_rendering title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Configures whether to use an async ReactPy rendering queue. When enabled, large renders will no longer block smaller renders from taking place. Additionally, prevents the rendering queue from being blocked on waiting for async effects to startup/shutdown (which is typically a relatively slow operation).</p> <p>This setting is currently experimental, and currently no effort is made to de-duplicate renders. For example, if parent and child components are scheduled to render at the same time, both renders will take place even though a single render of the parent component would have been sufficient.</p> <hr> <h3 id=reactpy_default_hosts><code class=highlight><span class=n>REACTPY_DEFAULT_HOSTS</span></code><a class=headerlink href=#reactpy_default_hosts title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>None</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=p>[</span><span class=s2>&quot;localhost:8000&quot;</span><span class=p>,</span> <span class=s2>&quot;localhost:8001&quot;</span><span class=p>,</span> <span class=s2>&quot;localhost:8002/subdir&quot;</span><span class=p>]</span></code></p> <p>The default host(s) that can render your ReactPy components.</p> <p>ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. This is typically useful for self-hosted applications.</p> <p>You can use the <code class=highlight><span class=n>host</span></code> argument in your <a href=../template-tag/#component>template tag</a> to manually override this default.</p> <hr> <h3 id=reactpy_prerender><code class=highlight><span class=n>REACTPY_PRERENDER</span></code><a class=headerlink href=#reactpy_prerender title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Configures whether to pre-render your components via HTTP, which enables SEO compatibility and reduces perceived latency.</p> <p>During pre-rendering, there are some key differences in behavior:</p> <ol> <li>Only the component's first paint is pre-rendered.</li> <li>All <a href=https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#connection-hooks><code>connection</code> hooks</a> will provide HTTP variants.</li> <li>The component will be non-interactive until a WebSocket connection is formed.</li> <li>The component is re-rendered once a WebSocket connection is formed.</li> </ol> <p>You can use the <code class=highlight><span class=n>prerender</span></code> argument in your <a href=../template-tag/#component>template tag</a> to manually override this default.</p> <hr> <h2 id=stability-settings>Stability Settings<a class=headerlink href=#stability-settings title="Permanent link">&para;</a></h2> <hr> <h3 id=reactpy_reconnect_interval><code class=highlight><span class=n>REACTPY_RECONNECT_INTERVAL</span></code><a class=headerlink href=#reactpy_reconnect_interval title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>750</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>100</span></code>, <code class=highlight><span class=mi>2500</span></code>, <code class=highlight><span class=mi>6000</span></code></p> <p>Milliseconds between client reconnection attempts.</p> <hr> <h3 id=reactpy_reconnect_backoff_multiplier><code class=highlight><span class=n>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</span></code><a class=headerlink href=#reactpy_reconnect_backoff_multiplier title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mf>1.25</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>1</span></code>, <code class=highlight><span class=mf>1.5</span></code>, <code class=highlight><span class=mi>3</span></code></p> <p>On each reconnection attempt, the <code class=highlight><span class=n>REACTPY_RECONNECT_INTERVAL</span></code> will be multiplied by this value to increase the time between attempts.</p> <p>You can keep time between each reconnection the same by setting this to <code class=highlight><span class=mi>1</span></code>.</p> <hr> <h3 id=reactpy_reconnect_max_interval><code class=highlight><span class=n>REACTPY_RECONNECT_MAX_INTERVAL</span></code><a class=headerlink href=#reactpy_reconnect_max_interval title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>60000</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>10000</span></code>, <code class=highlight><span class=mi>25000</span></code>, <code class=highlight><span class=mi>900000</span></code></p> <p>Maximum milliseconds between client reconnection attempts.</p> <p>This allows setting an upper bound on how high <code class=highlight><span class=n>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</span></code> can increase the time between reconnection attempts.</p> <hr> <h3 id=reactpy_reconnect_max_retries><code class=highlight><span class=n>REACTPY_RECONNECT_MAX_RETRIES</span></code><a class=headerlink href=#reactpy_reconnect_max_retries title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>150</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>0</span></code>, <code class=highlight><span class=mi>5</span></code>, <code class=highlight><span class=mi>300</span></code></p> <p>Maximum number of reconnection attempts before the client gives up.</p> <hr> <h3 id=reactpy_session_max_age><code class=highlight><span class=n>REACTPY_SESSION_MAX_AGE</span></code><a class=headerlink href=#reactpy_session_max_age title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>259200</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>0</span></code>, <code class=highlight><span class=mi>60</span></code>, <code class=highlight><span class=mi>96000</span></code></p> <p>Maximum seconds a ReactPy component session is valid for. Invalid sessions are deleted during <a href=#auto-clean-settings>ReactPy clean up</a>.</p> <p>ReactPy sessions include data such as <code class=highlight><span class=o>*</span><span class=n>args</span></code> and <code class=highlight><span class=o>**</span><span class=n>kwargs</span></code> passed into your <code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=cp>%}</span></code> template tag.</p> <p>Use <code class=highlight><span class=mi>0</span></code> to not store any session data.</p> <hr> <h2 id=auto-clean-settings>Auto-Clean Settings<a class=headerlink href=#auto-clean-settings title="Permanent link">&para;</a></h2> <hr> <h3 id=reactpy_clean_interval><code class=highlight><span class=n>REACTPY_CLEAN_INTERVAL</span></code><a class=headerlink href=#reactpy_clean_interval title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>604800</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>0</span></code>, <code class=highlight><span class=mi>3600</span></code>, <code class=highlight><span class=mi>86400</span></code>, <code class=highlight><span class=kc>None</span></code></p> <p>Minimum seconds between ReactPy automatic clean up operations.</p> <p>After a component disconnection, the server will perform a clean up if this amount of time has passed since the last clean up.</p> <p>Set this value to <code class=highlight><span class=kc>None</span></code> to disable automatic clean up operations.</p> <hr> <h3 id=reactpy_clean_sessions><code class=highlight><span class=n>REACTPY_CLEAN_SESSIONS</span></code><a class=headerlink href=#reactpy_clean_sessions title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>True</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>False</span></code></p> <p>Configures whether ReactPy should clean up expired component sessions during automatic clean up operations.</p> <hr> <h3 id=reactpy_clean_user_data><code class=highlight><span class=n>REACTPY_CLEAN_USER_DATA</span></code><a class=headerlink href=#reactpy_clean_user_data title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>True</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>False</span></code></p> <p>Configures whether ReactPy should clean up orphaned user data during automatic clean up operations.</p> <p>Typically, user data does not become orphaned unless the server crashes during a <code class=highlight><span class=n>User</span></code> delete operation.</p> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 1, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div> </div> </div> </div> <hr> <h3 id=reactpy_cache><code class=highlight><span class=n>REACTPY_CACHE</span></code><a class=headerlink href=#reactpy_cache title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=s2>&quot;default&quot;</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=s2>&quot;my-reactpy-cache&quot;</span></code></p> <p>Cache used by ReactPy, typically for caching disk operations.</p> <p>We recommend using <a href=https://docs.djangoproject.com/en/stable/topics/cache/#redis><code>redis</code></a>, <a href=https://docs.djangoproject.com/en/stable/topics/cache/#memcached><code>memcache</code></a>, or <a href=https://docs.djangoproject.com/en/stable/topics/cache/#local-memory-caching><code>local-memory caching</code></a>.</p> <hr> <h3 id=reactpy_backhaul_thread><code class=highlight><span class=n>REACTPY_BACKHAUL_THREAD</span></code><a class=headerlink href=#reactpy_backhaul_thread title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Configures whether ReactPy components are rendered in a dedicated thread.</p> <p>This allows the web server to process other traffic during ReactPy rendering. Vastly improves throughput with web servers such as <a href=https://github.com/pgjones/hypercorn><code>hypercorn</code></a> and <a href=https://www.uvicorn.org/ ><code>uvicorn</code></a>.</p> <p>This setting is incompatible with <a href=https://github.com/django/daphne><code>daphne</code></a>.</p> <hr> <h3 id=reactpy_async_rendering><code class=highlight><span class=n>REACTPY_ASYNC_RENDERING</span></code><a class=headerlink href=#reactpy_async_rendering title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Configures whether to use an async ReactPy rendering queue. When enabled, large renders will no longer block smaller renders from taking place. Additionally, prevents the rendering queue from being blocked on waiting for async effects to startup/shutdown (which is typically a relatively slow operation).</p> <p>This setting is currently experimental, and currently no effort is made to de-duplicate renders. For example, if parent and child components are scheduled to render at the same time, both renders will take place even though a single render of the parent component would have been sufficient.</p> <hr> <h3 id=reactpy_default_hosts><code class=highlight><span class=n>REACTPY_DEFAULT_HOSTS</span></code><a class=headerlink href=#reactpy_default_hosts title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>None</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=p>[</span><span class=s2>&quot;localhost:8000&quot;</span><span class=p>,</span> <span class=s2>&quot;localhost:8001&quot;</span><span class=p>,</span> <span class=s2>&quot;localhost:8002/subdir&quot;</span><span class=p>]</span></code></p> <p>The default host(s) that can render your ReactPy components.</p> <p>ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. This is typically useful for self-hosted applications.</p> <p>You can use the <code class=highlight><span class=n>host</span></code> argument in your <a href=../template-tag/#component>template tag</a> to manually override this default.</p> <hr> <h3 id=reactpy_prerender><code class=highlight><span class=n>REACTPY_PRERENDER</span></code><a class=headerlink href=#reactpy_prerender title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>False</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>True</span></code></p> <p>Configures whether to pre-render your components via HTTP, which enables SEO compatibility and reduces perceived latency.</p> <p>During pre-rendering, there are some key differences in behavior:</p> <ol> <li>Only the component's first paint is pre-rendered.</li> <li>All <a href=https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#connection-hooks><code>connection</code> hooks</a> will provide HTTP variants.</li> <li>The component will be non-interactive until a WebSocket connection is formed.</li> <li>The component is re-rendered once a WebSocket connection is formed.</li> </ol> <p>You can use the <code class=highlight><span class=n>prerender</span></code> argument in your <a href=../template-tag/#component>template tag</a> to manually override this default.</p> <hr> <h2 id=stability-settings>Stability Settings<a class=headerlink href=#stability-settings title="Permanent link">&para;</a></h2> <hr> <h3 id=reactpy_reconnect_interval><code class=highlight><span class=n>REACTPY_RECONNECT_INTERVAL</span></code><a class=headerlink href=#reactpy_reconnect_interval title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>750</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>100</span></code>, <code class=highlight><span class=mi>2500</span></code>, <code class=highlight><span class=mi>6000</span></code></p> <p>Milliseconds between client reconnection attempts.</p> <hr> <h3 id=reactpy_reconnect_backoff_multiplier><code class=highlight><span class=n>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</span></code><a class=headerlink href=#reactpy_reconnect_backoff_multiplier title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mf>1.25</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>1</span></code>, <code class=highlight><span class=mf>1.5</span></code>, <code class=highlight><span class=mi>3</span></code></p> <p>On each reconnection attempt, the <code class=highlight><span class=n>REACTPY_RECONNECT_INTERVAL</span></code> will be multiplied by this value to increase the time between attempts.</p> <p>You can keep time between each reconnection the same by setting this to <code class=highlight><span class=mi>1</span></code>.</p> <hr> <h3 id=reactpy_reconnect_max_interval><code class=highlight><span class=n>REACTPY_RECONNECT_MAX_INTERVAL</span></code><a class=headerlink href=#reactpy_reconnect_max_interval title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>60000</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>10000</span></code>, <code class=highlight><span class=mi>25000</span></code>, <code class=highlight><span class=mi>900000</span></code></p> <p>Maximum milliseconds between client reconnection attempts.</p> <p>This allows setting an upper bound on how high <code class=highlight><span class=n>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</span></code> can increase the time between reconnection attempts.</p> <hr> <h3 id=reactpy_reconnect_max_retries><code class=highlight><span class=n>REACTPY_RECONNECT_MAX_RETRIES</span></code><a class=headerlink href=#reactpy_reconnect_max_retries title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>150</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>0</span></code>, <code class=highlight><span class=mi>5</span></code>, <code class=highlight><span class=mi>300</span></code></p> <p>Maximum number of reconnection attempts before the client gives up.</p> <hr> <h3 id=reactpy_session_max_age><code class=highlight><span class=n>REACTPY_SESSION_MAX_AGE</span></code><a class=headerlink href=#reactpy_session_max_age title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>259200</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>0</span></code>, <code class=highlight><span class=mi>60</span></code>, <code class=highlight><span class=mi>96000</span></code></p> <p>Maximum seconds a ReactPy component session is valid for. Invalid sessions are deleted during <a href=#auto-clean-settings>ReactPy clean up</a>.</p> <p>ReactPy sessions include data such as <code class=highlight><span class=o>*</span><span class=n>args</span></code> and <code class=highlight><span class=o>**</span><span class=n>kwargs</span></code> passed into your <code class=highlight><span class=cp>{%</span> <span class=k>component</span> <span class=cp>%}</span></code> template tag.</p> <p>Use <code class=highlight><span class=mi>0</span></code> to not store any session data.</p> <hr> <h2 id=auto-clean-settings>Auto-Clean Settings<a class=headerlink href=#auto-clean-settings title="Permanent link">&para;</a></h2> <hr> <h3 id=reactpy_clean_interval><code class=highlight><span class=n>REACTPY_CLEAN_INTERVAL</span></code><a class=headerlink href=#reactpy_clean_interval title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=mi>604800</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=mi>0</span></code>, <code class=highlight><span class=mi>3600</span></code>, <code class=highlight><span class=mi>86400</span></code>, <code class=highlight><span class=kc>None</span></code></p> <p>Minimum seconds between ReactPy automatic clean up operations.</p> <p>After a component disconnection, the server will perform a clean up if this amount of time has passed since the last clean up.</p> <p>Set this value to <code class=highlight><span class=kc>None</span></code> to disable automatic clean up operations.</p> <hr> <h3 id=reactpy_clean_sessions><code class=highlight><span class=n>REACTPY_CLEAN_SESSIONS</span></code><a class=headerlink href=#reactpy_clean_sessions title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>True</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>False</span></code></p> <p>Configures whether ReactPy should clean up expired component sessions during automatic clean up operations.</p> <hr> <h3 id=reactpy_clean_user_data><code class=highlight><span class=n>REACTPY_CLEAN_USER_DATA</span></code><a class=headerlink href=#reactpy_clean_user_data title="Permanent link">&para;</a></h3> <p><strong>Default:</strong> <code class=highlight><span class=kc>True</span></code></p> <p><strong>Example Value(s):</strong> <code class=highlight><span class=kc>False</span></code></p> <p>Configures whether ReactPy should clean up orphaned user data during automatic clean up operations.</p> <p>Typically, user data does not become orphaned unless the server crashes during a <code class=highlight><span class=n>User</span></code> delete operation.</p> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/template-tag/index.html b/develop/reference/template-tag/index.html
index 5251f7f1..83992f72 100644
--- a/develop/reference/template-tag/index.html
+++ b/develop/reference/template-tag/index.html
@@ -128,18 +128,16 @@
 <span class=normal> 7</span>
 <span class=normal> 8</span>
 <span class=normal> 9</span>
-<span class=normal>10</span>
-<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>js</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>import</span> <span class=nn>js</span>
 <span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
 
 <span class=nd>@component</span>
 <span class=k>def</span> <span class=nf>root</span><span class=p>():</span>
-
-    <span class=k>def</span> <span class=nf>onClick</span><span class=p>(</span><span class=n>event</span><span class=p>):</span>
+    <span class=k>def</span> <span class=nf>on_click</span><span class=p>(</span><span class=n>event</span><span class=p>):</span>
         <span class=n>js</span><span class=o>.</span><span class=n>document</span><span class=o>.</span><span class=n>title</span> <span class=o>=</span> <span class=s2>&quot;New window title&quot;</span>
 
-    <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>({</span><span class=s2>&quot;onClick&quot;</span><span class=p>:</span> <span class=n>onClick</span><span class=p>},</span> <span class=s2>&quot;Click Me!&quot;</span><span class=p>)</span>
+    <span class=k>return</span> <span class=n>html</span><span class=o>.</span><span class=n>button</span><span class=p>({</span><span class=s2>&quot;onClick&quot;</span><span class=p>:</span> <span class=n>on_click</span><span class=p>},</span> <span class=s2>&quot;Click Me!&quot;</span><span class=p>)</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> <p><strong>PyScript FFI</strong></p> <p>...</p> <p><strong>PyScript JS Modules</strong></p> <p>Assuming you have a local bundle stored within your project's static files, you can import JavaScript modules in a fashion similar to <code class=highlight><span class=k>import</span><span class=w> </span><span class=p>{</span><span class=nx>moment</span><span class=p>}</span><span class=w> </span><span class=kr>from</span><span class=w> </span><span class=s1>&#39;static/moment.js&#39;</span></code>. You will first need to configure your <code class=highlight><span class=cp>{%</span> <span class=k>pyscript_setup</span> <span class=cp>%}</span></code> block to make the <code>moment.js</code> module available to PyScript. Then, this module can be accessed within <code class=highlight><span class=n>pyscript</span><span class=o>.</span><span class=n>js_modules</span><span class=o>.*</span></code>.</p> <div class="tabbed-set tabbed-alternate" data-tabs=10:2><input checked=checked id=__tabbed_10_1 name=__tabbed_10 type=radio><input id=__tabbed_10_2 name=__tabbed_10 type=radio><div class=tabbed-labels><label for=__tabbed_10_1>root.py</label><label for=__tabbed_10_2>my_template.html</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
 <span class=normal> 2</span>
 <span class=normal> 3</span>
@@ -219,22 +217,16 @@
 <span class=x>&lt;/body&gt;</span>
 
 <span class=x>&lt;/html&gt;</span>
-</code></pre></div></td></tr></table></div> </div> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
-<span class=normal> 2</span>
-<span class=normal> 3</span>
-<span class=normal> 4</span>
-<span class=normal> 5</span>
-<span class=normal> 6</span>
-<span class=normal> 7</span>
-<span class=normal> 8</span>
-<span class=normal> 9</span>
-<span class=normal>10</span>
-<span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>typing</span> <span class=kn>import</span> <span class=n>TYPE_CHECKING</span>
-
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
+</code></pre></div></td></tr></table></div> </div> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
+<span class=normal>2</span>
+<span class=normal>3</span>
+<span class=normal>4</span>
+<span class=normal>5</span>
+<span class=normal>6</span>
+<span class=normal>7</span>
+<span class=normal>8</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span><span class=p>,</span> <span class=n>html</span>
 
-<span class=k>if</span> <span class=n>TYPE_CHECKING</span><span class=p>:</span>
-    <span class=kn>from</span> <span class=nn>.child</span> <span class=kn>import</span> <span class=n>child_component</span>
+<span class=kn>from</span> <span class=nn>example.components</span> <span class=kn>import</span> <span class=n>child_component</span>
 
 
 <span class=nd>@component</span>
@@ -419,4 +411,4 @@
         <span class=n>context</span><span class=o>=</span><span class=p>{</span><span class=s2>&quot;my_config_object&quot;</span><span class=p>:</span> <span class=p>{</span><span class=s2>&quot;experimental_create_proxy&quot;</span><span class=p>:</span> <span class=s2>&quot;auto&quot;</span><span class=p>}},</span>
     <span class=p>)</span>
 </code></pre></div></td></tr></table></div> </div> </div> </div> </details> <details class=question> <summary>Can I use a local interpreter for PyScript?</summary> <p>Yes, you can set up a local interpreter by following PyScript's <a href=https://docs.pyscript.net/latest/user-guide/offline/#local-pyodide-packages>standard documentation</a>.</p> <p>To summarize,</p> <ol> <li>Download the latest Pyodide bundle from the <a href=https://github.com/pyodide/pyodide/releases>Pyodide GitHub releases page</a> (for example <code>pyodide-0.26.3.tar.bz2</code>).</li> <li>Extract the contents of the bundle to your project's static files.</li> <li> <p>Configure your <code class=highlight><span class=cp>{%</span> <span class=k>pyscript_setup</span> <span class=cp>%}</span></code> template tag to use <code>pyodide</code> as an interpreter.</p> <div class=highlight><pre><span></span><code><span class=cp>{%</span> <span class=k>pyscript_setup</span> <span class=nv>config</span><span class=o>=</span><span class=s1>&#39;{&quot;interpreter&quot;:&quot;/static/pyodide/pyodide.mjs&quot;}&#39;</span> <span class=cp>%}</span>
-</code></pre></div> </li> </ol> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 23, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div> </li> </ol> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/reference/utils/index.html b/develop/reference/utils/index.html
index e5a1d246..3bc324ab 100644
--- a/develop/reference/utils/index.html
+++ b/develop/reference/utils/index.html
@@ -9,9 +9,9 @@
 <span class=normal> 9</span>
 <span class=normal>10</span>
 <span class=normal>11</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
-<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
-<span class=kn>from</span> <span class=nn>.</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>example</span> <span class=kn>import</span> <span class=n>views</span>
+<span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_iframe</span>
 
 
 <span class=k>class</span> <span class=nc>ExampleAppConfig</span><span class=p>(</span><span class=n>AppConfig</span><span class=p>):</span>
@@ -19,15 +19,17 @@
 
     <span class=k>def</span> <span class=nf>ready</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
         <span class=n>register_iframe</span><span class=p>(</span><span class=n>views</span><span class=o>.</span><span class=n>hello_world</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>view</span></code></td> <td><code class=highlight><span class=n>Callable</span> <span class=o>|</span> <span class=n>View</span> <span class=o>|</span> <span class=nb>str</span></code></td> <td>The view to register. Can be a function or class based view, or a dotted path to a view.</td> <td>N/A</td> </tr> </tbody> </table> <p><font size=4><strong>Returns</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> </details> <details class=warning> <summary>Only use this within <code class=highlight><span class=n>AppConfig</span><span class=o>.</span><span class=n>ready</span><span class=p>()</span></code></summary> <p>You should always call <code class=highlight><span class=n>register_iframe</span></code> within a Django <a href=https://docs.djangoproject.com/en/stable/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code> method</a>. This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.</p> </details> <hr> <h2 id=register-component>Register Component<a class=headerlink href=#register-component title="Permanent link">&para;</a></h2> <p>This function is used register a root component with ReactPy.</p> <p>Typically, this function is automatically called on all components contained within Django templates.</p> <div class="tabbed-set tabbed-alternate" data-tabs=2:1><input checked=checked id=__tabbed_2_1 name=__tabbed_2 type=radio><div class=tabbed-labels><label for=__tabbed_2_1>apps.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal>1</span>
-<span class=normal>2</span>
-<span class=normal>3</span>
-<span class=normal>4</span>
-<span class=normal>5</span>
-<span class=normal>6</span>
-<span class=normal>7</span>
-<span class=normal>8</span>
-<span class=normal>9</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>view</span></code></td> <td><code class=highlight><span class=n>Callable</span> <span class=o>|</span> <span class=n>View</span> <span class=o>|</span> <span class=nb>str</span></code></td> <td>The view to register. Can be a function or class based view, or a dotted path to a view.</td> <td>N/A</td> </tr> </tbody> </table> <p><font size=4><strong>Returns</strong></font></p> <p><code class=highlight><span class=kc>None</span></code></p> </details> <details class=warning> <summary>Only use this within <code class=highlight><span class=n>AppConfig</span><span class=o>.</span><span class=n>ready</span><span class=p>()</span></code></summary> <p>You should always call <code class=highlight><span class=n>register_iframe</span></code> within a Django <a href=https://docs.djangoproject.com/en/stable/ref/applications/#django.apps.AppConfig.ready><code>AppConfig.ready()</code> method</a>. This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.</p> </details> <hr> <h2 id=register-component>Register Component<a class=headerlink href=#register-component title="Permanent link">&para;</a></h2> <p>This function is used register a root component with ReactPy.</p> <p>Typically, this function is automatically called on all components contained within Django templates.</p> <div class="tabbed-set tabbed-alternate" data-tabs=2:1><input checked=checked id=__tabbed_2_1 name=__tabbed_2 type=radio><div class=tabbed-labels><label for=__tabbed_2_1>apps.py</label></div> <div class=tabbed-content> <div class=tabbed-block> <div class=highlight><table class=highlighttable><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal> 1</span>
+<span class=normal> 2</span>
+<span class=normal> 3</span>
+<span class=normal> 4</span>
+<span class=normal> 5</span>
+<span class=normal> 6</span>
+<span class=normal> 7</span>
+<span class=normal> 8</span>
+<span class=normal> 9</span>
+<span class=normal>10</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>django.apps</span> <span class=kn>import</span> <span class=n>AppConfig</span>
+
 <span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>register_component</span>
 
 
@@ -55,8 +57,10 @@
 <span class=normal>17</span>
 <span class=normal>18</span>
 <span class=normal>19</span>
-<span class=normal>20</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
-<span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+<span class=normal>20</span>
+<span class=normal>21</span></pre></div></td><td class=code><div><pre><span></span><code><span class=kn>from</span> <span class=nn>reactpy</span> <span class=kn>import</span> <span class=n>component</span>
+
+<span class=kn>from</span> <span class=nn>example.models</span> <span class=kn>import</span> <span class=n>TodoItem</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.hooks</span> <span class=kn>import</span> <span class=n>use_query</span>
 <span class=kn>from</span> <span class=nn>reactpy_django.utils</span> <span class=kn>import</span> <span class=n>django_query_postprocessor</span>
 
@@ -84,4 +88,4 @@
 
 <span class=k>class</span> <span class=nc>TodoItem</span><span class=p>(</span><span class=n>Model</span><span class=p>):</span>
     <span class=n>text</span><span class=p>:</span> <span class=n>CharField</span> <span class=o>=</span> <span class=n>CharField</span><span class=p>(</span><span class=n>max_length</span><span class=o>=</span><span class=mi>255</span><span class=p>)</span>
-</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>data</span></code></td> <td><code class=highlight><span class=n>QuerySet</span> <span class=o>|</span> <span class=n>Model</span></code></td> <td>The <code class=highlight><span class=n>Model</span></code> or <code class=highlight><span class=n>QuerySet</span></code> to recursively fetch fields from.</td> <td>N/A</td> </tr> <tr> <td><code class=highlight><span class=n>many_to_many</span></code></td> <td><code class=highlight><span class=nb>bool</span></code></td> <td>Whether or not to recursively fetch <code class=highlight><span class=n>ManyToManyField</span></code> relationships.</td> <td><code class=highlight><span class=kc>True</span></code></td> </tr> <tr> <td><code class=highlight><span class=n>many_to_one</span></code></td> <td><code class=highlight><span class=nb>bool</span></code></td> <td>Whether or not to recursively fetch <code class=highlight><span class=n>ForeignKey</span></code> relationships.</td> <td><code class=highlight><span class=kc>True</span></code></td> </tr> </tbody> </table> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>QuerySet</span> <span class=o>|</span> <span class=n>Model</span></code></td> <td>The <code class=highlight><span class=n>Model</span></code> or <code class=highlight><span class=n>QuerySet</span></code> with all fields fetched.</td> </tr> </tbody> </table> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">October 22, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
+</code></pre></div></td></tr></table></div> </div> </div> </div> <details class=example> <summary>See Interface</summary> <p><font size=4><strong>Parameters</strong></font></p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>data</span></code></td> <td><code class=highlight><span class=n>QuerySet</span> <span class=o>|</span> <span class=n>Model</span></code></td> <td>The <code class=highlight><span class=n>Model</span></code> or <code class=highlight><span class=n>QuerySet</span></code> to recursively fetch fields from.</td> <td>N/A</td> </tr> <tr> <td><code class=highlight><span class=n>many_to_many</span></code></td> <td><code class=highlight><span class=nb>bool</span></code></td> <td>Whether or not to recursively fetch <code class=highlight><span class=n>ManyToManyField</span></code> relationships.</td> <td><code class=highlight><span class=kc>True</span></code></td> </tr> <tr> <td><code class=highlight><span class=n>many_to_one</span></code></td> <td><code class=highlight><span class=nb>bool</span></code></td> <td>Whether or not to recursively fetch <code class=highlight><span class=n>ForeignKey</span></code> relationships.</td> <td><code class=highlight><span class=kc>True</span></code></td> </tr> </tbody> </table> <p><font size=4><strong>Returns</strong></font></p> <table> <thead> <tr> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code class=highlight><span class=n>QuerySet</span> <span class=o>|</span> <span class=n>Model</span></code></td> <td>The <code class=highlight><span class=n>Model</span></code> or <code class=highlight><span class=n>QuerySet</span></code> with all fields fetched.</td> </tr> </tbody> </table> </details> <hr> <div class=md-source-file> <small> Last update: <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">December 2, 2024</span> </small> </div> <div class=md-source-date> <small> Authors: <span class="git-page-authors git-authors"><a href=mailto:archiethemonger@gmail.com>Mark Bakhit</a></span> </small> </div> </article> </div> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class=md-footer> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> &copy; <div id=year></div> <script>document.getElementById("year").innerHTML = new Date().getFullYear();</script> Reactive Python and affiliates. <div class=legal-footer-right>This project has no affiliation to ReactJS or Meta Platforms, Inc.</div> </div> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../..", "features": ["navigation.instant", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "content.code.copy", "search.highlight"], "search": "../../assets/javascripts/workers/search.a264c092.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": {"provider": "mike"}}</script> <script src=../../assets/javascripts/bundle.4e0fa4ba.min.js></script> <script src=../../assets/js/main.js></script> </body> </html>
\ No newline at end of file
diff --git a/develop/search/search_index.json b/develop/search/search_index.json
index be56c637..214ed4d6 100644
--- a/develop/search/search_index.json
+++ b/develop/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"about/changelog/","title":"Changelog","text":"<p>    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.    </p>"},{"location":"about/changelog/#unreleased","title":"Unreleased","text":""},{"location":"about/changelog/#fixed","title":"Fixed","text":"<ul> <li>Fixed regression in v5.1.0 where components would sometimes not output debug messages when <code>settings.py:DEBUG</code> is enabled.</li> </ul>"},{"location":"about/changelog/#changed","title":"Changed","text":"<ul> <li>Set upper limit on ReactPy version to <code>&lt;2.0.0</code>.</li> </ul>"},{"location":"about/changelog/#510-2024-11-24","title":"5.1.0 - 2024-11-24","text":""},{"location":"about/changelog/#added","title":"Added","text":"<ul> <li><code>settings.py:REACTPY_ASYNC_RENDERING</code> to enable asynchronous rendering of components.</li> </ul>"},{"location":"about/changelog/#changed_1","title":"Changed","text":"<ul> <li>Bumped the minimum ReactPy version to <code>1.1.0</code>.</li> </ul>"},{"location":"about/changelog/#500-2024-10-22","title":"5.0.0 - 2024-10-22","text":""},{"location":"about/changelog/#changed_2","title":"Changed","text":"<ul> <li>Now using ReactPy-Router v1 for URL routing, which comes with a slightly different API than before.</li> <li>Removed dependency on <code>aiofile</code>.</li> </ul>"},{"location":"about/changelog/#removed","title":"Removed","text":"<ul> <li>Removed the following deprecated features:<ul> <li>The <code>compatibility</code> argument on <code>reactpy_django.components.view_to_component</code></li> <li><code>reactpy_django.components.view_to_component</code> usage as a decorator</li> <li><code>reactpy_django.decorators.auth_required</code></li> <li><code>reactpy_django.REACTPY_WEBSOCKET_PATH</code></li> <li><code>settings.py:REACTPY_WEBSOCKET_URL</code></li> </ul> </li> </ul>"},{"location":"about/changelog/#400-2024-06-22","title":"4.0.0 - 2024-06-22","text":""},{"location":"about/changelog/#added_1","title":"Added","text":"<ul> <li>Client-side Python components can now be rendered via the new <code>{% pyscript_component %}</code> template tag<ul> <li>You must first call the <code>{% pyscript_setup %}</code> template tag to load PyScript dependencies</li> </ul> </li> <li>Client-side components can be embedded into existing server-side components via <code>reactpy_django.components.pyscript_component</code>.</li> <li>Tired of writing JavaScript? You can now write PyScript code that runs directly within client browser via the <code>reactpy_django.html.pyscript</code> element.<ul> <li>This is a viable substitution for most JavaScript code.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_3","title":"Changed","text":"<ul> <li> <p>New syntax for <code>use_query</code> and <code>use_mutation</code> hooks. Here's a quick comparison of the changes:</p> <pre><code>query = use_query(QueryOptions(thread_sensitive=True), get_items, foo=\"bar\") # Old\nquery = use_query(get_items, {\"foo\":\"bar\"}, thread_sensitive=True) # New\n\nmutation = use_mutation(MutationOptions(thread_sensitive=True), remove_item) # Old\nmutation = use_mutation(remove_item, thread_sensitive=True) # New\n</code></pre> </li> </ul>"},{"location":"about/changelog/#removed_1","title":"Removed","text":"<ul> <li><code>QueryOptions</code> and <code>MutationOptions</code> have been removed. The value contained within these objects are now passed directly into the hook.</li> </ul>"},{"location":"about/changelog/#fixed_1","title":"Fixed","text":"<ul> <li>Resolved a bug where Django-ReactPy would not properly detect <code>settings.py:DEBUG</code>.</li> </ul>"},{"location":"about/changelog/#381-2024-05-07","title":"3.8.1 - 2024-05-07","text":""},{"location":"about/changelog/#added_2","title":"Added","text":"<ul> <li>Python 3.12 compatibility</li> </ul>"},{"location":"about/changelog/#380-2024-02-20","title":"3.8.0 - 2024-02-20","text":""},{"location":"about/changelog/#added_3","title":"Added","text":"<ul> <li>Built-in cross-process communication mechanism via the <code>reactpy_django.hooks.use_channel_layer</code> hook.</li> <li>Access to the root component's <code>id</code> via the <code>reactpy_django.hooks.use_root_id</code> hook.</li> <li>More robust control over ReactPy clean up tasks!<ul> <li><code>settings.py:REACTPY_CLEAN_INTERVAL</code> to control how often ReactPy automatically performs cleaning tasks.</li> <li><code>settings.py:REACTPY_CLEAN_SESSIONS</code> to control whether ReactPy should clean up expired sessions during automatic cleanups.</li> <li><code>settings.py:REACTPY_CLEAN_USER_DATA</code> to control whether ReactPy should clean up orphaned user data during automatic cleanups.</li> <li><code>python manage.py clean_reactpy</code> command to manually perform ReactPy clean up tasks.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_4","title":"Changed","text":"<ul> <li>Simplified code for cascading deletion of user data.</li> </ul>"},{"location":"about/changelog/#370-2024-01-30","title":"3.7.0 - 2024-01-30","text":""},{"location":"about/changelog/#added_4","title":"Added","text":"<ul> <li>An \"offline component\" can now be displayed when the client disconnects from the server.</li> <li>URL router now supports a <code>*</code> wildcard to create default routes.</li> </ul>"},{"location":"about/changelog/#360-2024-01-10","title":"3.6.0 - 2024-01-10","text":""},{"location":"about/changelog/#added_5","title":"Added","text":"<ul> <li>Built-in Single Page Application (SPA) support!<ul> <li><code>reactpy_django.router.django_router</code> can be used to render your Django application as a SPA.</li> </ul> </li> <li>SEO compatible rendering!<ul> <li><code>settings.py:REACTPY_PRERENDER</code> can be set to <code>True</code> to make components pre-render by default.</li> <li>Or, you can enable it on individual components via the template tag: <code>{% component \"...\" prerender=\"True\" %}</code>.</li> </ul> </li> <li>New <code>view_to_iframe</code> feature!<ul> <li><code>reactpy_django.components.view_to_iframe</code> uses an <code>&lt;iframe&gt;</code> to render a Django view.</li> <li><code>reactpy_django.utils.register_iframe</code> tells ReactPy which views <code>view_to_iframe</code> can use.</li> </ul> </li> <li>New Django <code>User</code> related features!<ul> <li><code>reactpy_django.hooks.use_user</code> can be used to access the current user.</li> <li><code>reactpy_django.hooks.use_user_data</code> provides a simplified interface for storing user key-value data.</li> <li><code>reactpy_django.decorators.user_passes_test</code> is inspired by the equivalent Django decorator, but ours works with ReactPy components.</li> <li><code>settings.py:REACTPY_AUTO_RELOGIN</code> will cause component WebSocket connections to automatically re-login users that are already authenticated. This is useful to continuously update <code>last_login</code> timestamps and refresh the Django login session.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_5","title":"Changed","text":"<ul> <li>Renamed undocumented utility function <code>ComponentPreloader</code> to <code>RootComponentFinder</code>.</li> <li>It is now recommended to call <code>as_view()</code> when using <code>view_to_component</code> or <code>view_to_iframe</code> with Class Based Views.</li> <li>For thread safety, <code>thread_sensitive=True</code> has been enabled in all <code>sync_to_async</code> functions where ORM queries are possible.</li> <li><code>reactpy_django.hooks.use_mutation</code> now has a <code>__call__</code> method. So rather than writing <code>my_mutation.execute(...)</code>, you can now write <code>my_mutation(...)</code>.</li> </ul>"},{"location":"about/changelog/#deprecated","title":"Deprecated","text":"<ul> <li>The <code>compatibility</code> argument on <code>reactpy_django.components.view_to_component</code> is deprecated.<ul> <li>Use <code>view_to_iframe</code> as a replacement.</li> </ul> </li> <li><code>reactpy_django.components.view_to_component</code> usage as a decorator is deprecated.<ul> <li>Check the docs on how to use <code>view_to_component</code> as a function instead.</li> </ul> </li> <li><code>reactpy_django.decorators.auth_required</code> is deprecated.<ul> <li>Use <code>reactpy_django.decorators.user_passes_test</code> instead.</li> <li>An equivalent to <code>auth_required</code>'s default is <code>@user_passes_test(lambda user: user.is_active)</code>.</li> </ul> </li> </ul>"},{"location":"about/changelog/#fixed_2","title":"Fixed","text":"<ul> <li>Fixed a bug where exception stacks would not print on failed component renders.</li> </ul>"},{"location":"about/changelog/#351-2023-09-07","title":"3.5.1 - 2023-09-07","text":""},{"location":"about/changelog/#added_6","title":"Added","text":"<ul> <li>Warning W018 (<code>Suspicious position of 'reactpy_django' in INSTALLED_APPS</code>) has been added.</li> </ul>"},{"location":"about/changelog/#changed_6","title":"Changed","text":"<ul> <li>The default postprocessor can now disabled by setting <code>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</code> to <code>None</code>.</li> <li>Massive overhaul of docs styling.</li> </ul>"},{"location":"about/changelog/#350-2023-08-26","title":"3.5.0 - 2023-08-26","text":""},{"location":"about/changelog/#added_7","title":"Added","text":"<ul> <li>More customization for reconnection behavior through new settings!<ul> <li><code>REACTPY_RECONNECT_INTERVAL</code></li> <li><code>REACTPY_RECONNECT_MAX_INTERVAL</code></li> <li><code>REACTPY_RECONNECT_MAX_RETRIES</code></li> <li><code>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</code></li> </ul> </li> <li>ReactPy-Django docs are now version controlled via mike!</li> </ul>"},{"location":"about/changelog/#changed_7","title":"Changed","text":"<ul> <li>Bumped the minimum ReactPy version to <code>1.0.2</code>.</li> <li>Prettier WebSocket URLs for components that do not have sessions.</li> <li>Template tag will now only validate <code>args</code>/<code>kwargs</code> if <code>settings.py:DEBUG</code> is enabled.</li> <li>Bumped the minimum <code>@reactpy/client</code> version to <code>0.3.1</code></li> <li>Use TypeScript instead of JavaScript for this repository.</li> <li>Bumped the minimum Django version to <code>4.2</code>.</li> </ul> Django 4.2+ is required <p>ReactPy-Django will continue bumping minimum Django requirements to versions that increase async support.</p> <p>This \"latest-only\" trend will continue until Django has all async features that ReactPy benefits from. After this point, ReactPy-Django will begin supporting all maintained Django versions.</p>"},{"location":"about/changelog/#removed_2","title":"Removed","text":"<ul> <li><code>settings.py:REACTPY_RECONNECT_MAX</code> is removed. See the docs for the new <code>REACTPY_RECONNECT_*</code> settings.</li> </ul>"},{"location":"about/changelog/#340-2023-08-18","title":"3.4.0 - 2023-08-18","text":""},{"location":"about/changelog/#added_8","title":"Added","text":"<ul> <li>Distributed Computing: ReactPy components can now optionally be rendered by a completely separate server!<ul> <li><code>REACTPY_DEFAULT_HOSTS</code> setting can round-robin a list of ReactPy rendering hosts.</li> <li><code>host</code> argument has been added to the <code>component</code> template tag to force components to render on a specific host.</li> </ul> </li> <li><code>reactpy_django.utils.register_component</code> function can manually register root components.<ul> <li>Useful if you have dedicated ReactPy rendering application(s) that do not use HTML templates.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_8","title":"Changed","text":"<ul> <li>ReactPy will now provide a warning if your HTTP URLs are not on the same prefix as your WebSockets.</li> <li>Cleaner logging output for auto-detected ReactPy root components.</li> </ul>"},{"location":"about/changelog/#deprecated_1","title":"Deprecated","text":"<ul> <li><code>reactpy_django.REACTPY_WEBSOCKET_PATH</code> is deprecated. The identical replacement is <code>REACTPY_WEBSOCKET_ROUTE</code>.</li> <li><code>settings.py:REACTPY_WEBSOCKET_URL</code> is deprecated. The similar replacement is <code>REACTPY_URL_PREFIX</code>.</li> </ul>"},{"location":"about/changelog/#removed_3","title":"Removed","text":"<ul> <li>Warning W007 (<code>REACTPY_WEBSOCKET_URL doesn't end with a slash</code>) has been removed. ReactPy now automatically handles slashes.</li> <li>Warning W008 (<code>REACTPY_WEBSOCKET_URL doesn't start with an alphanumeric character</code>) has been removed. ReactPy now automatically handles this scenario.</li> <li>Error E009 (<code>channels is not in settings.py:INSTALLED_APPS</code>) has been removed. Newer versions of <code>channels</code> do not require installation via <code>INSTALLED_APPS</code> to receive an ASGI web server.</li> </ul>"},{"location":"about/changelog/#332-2023-08-13","title":"3.3.2 - 2023-08-13","text":""},{"location":"about/changelog/#added_9","title":"Added","text":"<ul> <li>ReactPy WebSocket will now decode messages via <code>orjson</code> resulting in an ~6% overall performance improvement.</li> <li>Built-in <code>asyncio</code> event loops are now patched via <code>nest_asyncio</code>, resulting in an ~10% overall performance improvement. This has no performance impact if you are running your web server with <code>uvloop</code>.</li> </ul>"},{"location":"about/changelog/#fixed_3","title":"Fixed","text":"<ul> <li>Fix bug where <code>REACTPY_WEBSOCKET_URL</code> always generates a warning if unset.</li> <li>Fixed bug on Windows where <code>assert f is self._write_fut</code> would be raised by <code>uvicorn</code> when <code>REACTPY_BACKHAUL_THREAD = True</code>.</li> <li>Fixed bug on Windows where rendering behavior would be jittery with <code>daphne</code> when <code>REACTPY_BACKHAUL_THREAD = True</code>.</li> </ul>"},{"location":"about/changelog/#331-2023-08-08","title":"3.3.1 - 2023-08-08","text":""},{"location":"about/changelog/#added_10","title":"Added","text":"<ul> <li>Additional system checks for ReactPy misconfigurations.</li> </ul>"},{"location":"about/changelog/#changed_9","title":"Changed","text":"<ul> <li><code>REACTPY_BACKHAUL_THREAD</code> now defaults to <code>False</code>.</li> </ul>"},{"location":"about/changelog/#330-2023-08-05","title":"3.3.0 - 2023-08-05","text":""},{"location":"about/changelog/#added_11","title":"Added","text":"<ul> <li>Added system checks for a variety of common ReactPy misconfigurations.</li> <li><code>REACTPY_BACKHAUL_THREAD</code> setting to enable/disable threading behavior.</li> </ul>"},{"location":"about/changelog/#changed_10","title":"Changed","text":"<ul> <li>If using <code>settings.py:REACTPY_DATABASE</code>, <code>reactpy_django.database.Router</code> must now be registered in <code>settings.py:DATABASE_ROUTERS</code>.</li> <li>By default, ReactPy will now use a backhaul thread to increase performance.</li> <li>Minimum Python version required is now <code>3.9</code></li> <li>A thread-safe cache is no longer required.</li> </ul>"},{"location":"about/changelog/#321-2023-06-29","title":"3.2.1 - 2023-06-29","text":""},{"location":"about/changelog/#added_12","title":"Added","text":"<ul> <li>Template tag exception details are now rendered on the webpage when <code>settings.py:DEBUG</code> is enabled.</li> </ul>"},{"location":"about/changelog/#fixed_4","title":"Fixed","text":"<ul> <li>Prevent exceptions within the <code>component</code> template tag from causing the whole template to fail to render.</li> </ul>"},{"location":"about/changelog/#320-2023-06-08","title":"3.2.0 - 2023-06-08","text":""},{"location":"about/changelog/#added_13","title":"Added","text":"<ul> <li>Added warning if poor system/cache/database performance is detected while in <code>DEBUG</code> mode.</li> <li>Added <code>REACTPY_AUTH_BACKEND</code> setting to allow for custom authentication backends.</li> </ul>"},{"location":"about/changelog/#changed_11","title":"Changed","text":"<ul> <li>Using <code>SessionMiddlewareStack</code> is now optional.</li> <li>Using <code>AuthMiddlewareStack</code> is now optional.</li> </ul>"},{"location":"about/changelog/#310-2023-05-06","title":"3.1.0 - 2023-05-06","text":""},{"location":"about/changelog/#added_14","title":"Added","text":"<ul> <li><code>use_query</code> now supports async functions.</li> <li><code>use_mutation</code> now supports async functions.</li> <li><code>reactpy_django.types.QueryOptions.thread_sensitive</code> option to customize how sync queries are executed.</li> <li><code>reactpy_django.hooks.use_mutation</code> now accepts <code>reactpy_django.types.MutationOptions</code> option to customize how mutations are executed.</li> </ul>"},{"location":"about/changelog/#changed_12","title":"Changed","text":"<ul> <li>The <code>mutate</code> argument on <code>reactpy_django.hooks.use_mutation</code> has been renamed to <code>mutation</code>.</li> </ul>"},{"location":"about/changelog/#fixed_5","title":"Fixed","text":"<ul> <li>Fix bug where ReactPy utilizes Django's default cache timeout, which can prematurely expire the component cache.</li> </ul>"},{"location":"about/changelog/#301-2023-04-06","title":"3.0.1 - 2023-04-06","text":""},{"location":"about/changelog/#changed_13","title":"Changed","text":"<ul> <li><code>reactpy-django</code> database entries are no longer cleaned during Django application startup. Instead, it will occur on webpage loads if <code>REACTPY_RECONNECT_MAX</code> seconds has elapsed since the last cleaning.</li> </ul>"},{"location":"about/changelog/#300-reactpy-2023-03-30","title":"3.0.0-reactpy - 2023-03-30","text":""},{"location":"about/changelog/#changed_14","title":"Changed","text":"<ul> <li><code>django-idom</code> has been renamed to <code>reactpy-django</code>! Please note that all references to the word <code>idom</code> in your code should be changed to <code>reactpy</code>. See the docs for more details.</li> </ul>"},{"location":"about/changelog/#300-2023-03-08","title":"3.0.0 - 2023-03-08","text":"Note <p>This is Django-IDOM's biggest update yet!</p> <p>To upgrade from previous version you will need to...</p> <ol> <li>Install <code>django-idom &gt;= 3.0.0</code></li> <li>Run <code>idom rewrite-keys &lt;DIR&gt;</code> and <code>idom rewrite-camel-case-props &lt;DIR&gt;</code> to update your <code>idom.html.*</code> calls to the new syntax</li> <li>Run <code>python manage.py migrate</code> to create the new Django-IDOM database entries</li> </ol>"},{"location":"about/changelog/#added_15","title":"Added","text":"<ul> <li>The <code>idom</code> client will automatically configure itself to debug mode depending on <code>settings.py:DEBUG</code>.</li> <li><code>use_connection</code> hook for returning the browser's active <code>Connection</code>.</li> <li><code>IDOM_CACHE</code> is now configurable within <code>settings.py</code> to whatever cache name you wish.</li> </ul>"},{"location":"about/changelog/#changed_15","title":"Changed","text":"<ul> <li>It is now mandatory to run <code>manage.py migrate</code> after installing IDOM.</li> <li>Bumped the minimum IDOM version to 1.0.0. Due to IDOM 1.0.0, <code>idom.html.*</code>...<ul> <li>HTML properties can now be <code>snake_case</code>. For example <code>className</code> now becomes <code>class_name</code>.</li> <li><code>key=...</code> is now declared within the props <code>dict</code> (rather than as a <code>kwarg</code>).</li> </ul> </li> <li>The <code>component</code> template tag now supports both positional and keyword arguments.</li> <li>The <code>component</code> template tag now supports non-serializable arguments.</li> <li><code>IDOM_WS_MAX_RECONNECT_TIMEOUT</code> setting has been renamed to <code>IDOM_RECONNECT_MAX</code>.</li> </ul>"},{"location":"about/changelog/#removed_4","title":"Removed","text":"<ul> <li><code>django_idom.hooks.use_websocket</code> has been removed. The similar replacement is <code>django_idom.hooks.use_connection</code>.</li> <li><code>django_idom.types.IdomWebsocket</code> has been removed. The similar replacement is <code>django_idom.types.Connection</code>.</li> <li><code>settings.py:CACHE['idom']</code> is no longer used by default. The name of the cache back-end must now be specified with the <code>IDOM_CACHE</code> setting.</li> </ul>"},{"location":"about/changelog/#fixed_6","title":"Fixed","text":"<ul> <li><code>view_to_component</code> will now retain the contents of a <code>&lt;head&gt;</code> tag when rendering.</li> <li>React client is now set to <code>production</code> rather than <code>development</code>.</li> <li><code>use_query</code> will now utilize <code>field.related_name</code> when postprocessing many-to-one relationships.</li> </ul>"},{"location":"about/changelog/#security","title":"Security","text":"<ul> <li>Fixed a potential method of component template tag argument spoofing.</li> <li>Exception information will no longer be displayed on the page, based on the value of <code>settings.py:DEBUG</code>.</li> </ul>"},{"location":"about/changelog/#221-2023-01-09","title":"2.2.1 - 2023-01-09","text":""},{"location":"about/changelog/#fixed_7","title":"Fixed","text":"<ul> <li>Fixed bug where <code>use_query</code> would not recursively fetch many-to-one relationships.</li> <li>IDOM preloader will now print out the exception stack when failing to import a module.</li> </ul>"},{"location":"about/changelog/#220-2022-12-28","title":"2.2.0 - 2022-12-28","text":""},{"location":"about/changelog/#added_16","title":"Added","text":"<ul> <li>Add <code>options: QueryOptions</code> parameter to <code>use_query</code> to allow for configuration of this hook.</li> </ul>"},{"location":"about/changelog/#changed_16","title":"Changed","text":"<ul> <li>By default, <code>use_query</code> will recursively prefetch all many-to-many or many-to-one relationships to prevent <code>SynchronousOnlyOperation</code> exceptions.</li> </ul>"},{"location":"about/changelog/#removed_5","title":"Removed","text":"<ul> <li><code>django_idom.hooks._fetch_lazy_fields</code> has been deleted. The equivalent replacement is <code>django_idom.utils.django_query_postprocessor</code>.</li> </ul>"},{"location":"about/changelog/#210-2022-11-01","title":"2.1.0 - 2022-11-01","text":""},{"location":"about/changelog/#changed_17","title":"Changed","text":"<ul> <li>Minimum <code>channels</code> version is now <code>4.0.0</code>.</li> </ul>"},{"location":"about/changelog/#fixed_8","title":"Fixed","text":"<ul> <li>Change type hint on <code>view_to_component</code> callable to have <code>request</code> argument be optional.</li> <li>Change type hint on <code>view_to_component</code> to represent it as a decorator with parenthesis (such as <code>@view_to_component(compatibility=True)</code>)</li> </ul>"},{"location":"about/changelog/#security_1","title":"Security","text":"<ul> <li>Add note to docs about potential information exposure via <code>view_to_component</code> when using <code>compatibility=True</code>.</li> </ul>"},{"location":"about/changelog/#201-2022-10-18","title":"2.0.1 - 2022-10-18","text":""},{"location":"about/changelog/#fixed_9","title":"Fixed","text":"<ul> <li>Ability to use <code>key=...</code> parameter on all prefabricated components.</li> </ul>"},{"location":"about/changelog/#200-2022-10-17","title":"2.0.0 - 2022-10-17","text":""},{"location":"about/changelog/#added_17","title":"Added","text":"<ul> <li><code>use_origin</code> hook for returning the browser's <code>location.origin</code>.</li> </ul>"},{"location":"about/changelog/#changed_18","title":"Changed","text":"<ul> <li><code>view_to_component</code> now returns a <code>Callable</code>, instead of directly returning a <code>Component</code>. Check the docs for new usage info.</li> <li><code>use_mutation</code> and <code>use_query</code> will now log any query failures.</li> </ul>"},{"location":"about/changelog/#fixed_10","title":"Fixed","text":"<ul> <li>Allow <code>use_mutation</code> to have <code>refetch=None</code>, as the docs suggest is possible.</li> <li><code>use_query</code> will now prefetch all fields to prevent <code>SynchronousOnlyOperation</code> exceptions.</li> <li><code>view_to_component</code>, <code>django_css</code>, and <code>django_js</code> type hints will now display like normal functions.</li> <li>IDOM preloader no longer attempts to parse commented out IDOM components.</li> <li>Tests are now fully functional on Windows</li> </ul>"},{"location":"about/changelog/#120-2022-09-19","title":"1.2.0 - 2022-09-19","text":""},{"location":"about/changelog/#added_18","title":"Added","text":"<ul> <li><code>auth_required</code> decorator to prevent your components from rendering to unauthenticated users.</li> <li><code>use_query</code> hook for fetching database values.</li> <li><code>use_mutation</code> hook for modifying database values.</li> <li><code>view_to_component</code> utility to convert legacy Django views to IDOM components.</li> </ul>"},{"location":"about/changelog/#changed_19","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.40.2</li> <li>Testing suite now uses <code>playwright</code> instead of <code>selenium</code></li> </ul>"},{"location":"about/changelog/#fixed_11","title":"Fixed","text":"<ul> <li>IDOM preloader is no longer sensitive to whitespace within template tags.</li> </ul>"},{"location":"about/changelog/#110-2022-07-01","title":"1.1.0 - 2022-07-01","text":""},{"location":"about/changelog/#added_19","title":"Added","text":"<ul> <li><code>django_css</code> and <code>django_js</code> components to defer loading CSS &amp; JS files until needed.</li> </ul>"},{"location":"about/changelog/#changed_20","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.39.0</li> </ul>"},{"location":"about/changelog/#100-2022-05-22","title":"1.0.0 - 2022-05-22","text":""},{"location":"about/changelog/#added_20","title":"Added","text":"<ul> <li>Django specific hooks! <code>use_websocket</code>, <code>use_scope</code>, and <code>use_location</code> are now available within the <code>django_idom.hooks</code> module.</li> <li>Documentation has been placed into a formal docs webpage.</li> <li>Logging for when a component fails to import, or if no components were found within Django.</li> </ul>"},{"location":"about/changelog/#changed_21","title":"Changed","text":"<ul> <li><code>idom_component</code> template tag has been renamed to <code>component</code></li> <li>Bumped the minimum IDOM version to 0.38.0</li> </ul>"},{"location":"about/changelog/#removed_6","title":"Removed","text":"<ul> <li><code>websocket</code> parameter for components has been removed. Functionally, it is replaced with <code>django_idom.hooks.use_websocket</code>.</li> </ul>"},{"location":"about/changelog/#005-2022-04-04","title":"0.0.5 - 2022-04-04","text":""},{"location":"about/changelog/#changed_22","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.37.2</li> </ul>"},{"location":"about/changelog/#fixed_12","title":"Fixed","text":"<ul> <li>ModuleNotFoundError: No module named <code>idom.core.proto</code> caused by IDOM 0.37.2</li> </ul>"},{"location":"about/changelog/#004-2022-03-05","title":"0.0.4 - 2022-03-05","text":""},{"location":"about/changelog/#changed_23","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.37.1</li> </ul>"},{"location":"about/changelog/#003-2022-02-19","title":"0.0.3 - 2022-02-19","text":""},{"location":"about/changelog/#changed_24","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.36.3</li> </ul>"},{"location":"about/changelog/#002-2022-01-30","title":"0.0.2 - 2022-01-30","text":""},{"location":"about/changelog/#added_21","title":"Added","text":"<ul> <li>Ability to declare the HTML class of the top-level component <code>div</code></li> <li><code>name = ...</code> parameter to IDOM HTTP paths for use with <code>django.urls.reverse()</code></li> <li>Cache versioning to automatically invalidate old web module files from the cache back-end</li> <li>Automatic pre-population of the IDOM component registry</li> <li>Type hinting for <code>IdomWebsocket</code></li> </ul>"},{"location":"about/changelog/#changed_25","title":"Changed","text":"<ul> <li>Fetching web modules from disk and/or cache is now fully async</li> <li>Static files are now contained within a <code>django_idom/</code> parent folder</li> <li>Upgraded IDOM to version <code>0.36.0</code></li> <li>Minimum Django version required is now <code>4.0</code></li> <li>Minimum Python version required is now <code>3.8</code></li> </ul>"},{"location":"about/changelog/#removed_7","title":"Removed","text":"<ul> <li><code>IDOM_WEB_MODULES_PATH</code> has been replaced with Django <code>include(...)</code></li> <li><code>IDOM_WS_MAX_RECONNECT_DELAY</code> has been renamed to <code>IDOM_WS_MAX_RECONNECT_TIMEOUT</code></li> <li><code>idom_web_modules</code> cache back-end has been renamed to <code>idom</code></li> </ul>"},{"location":"about/changelog/#fixed_13","title":"Fixed","text":"<ul> <li>Increase test timeout values to prevent false positives</li> <li>Windows compatibility for building Django-IDOM</li> </ul>"},{"location":"about/changelog/#security_2","title":"Security","text":"<ul> <li>Fixed potential directory traversal attack on the IDOM web modules URL</li> </ul>"},{"location":"about/changelog/#001-2021-08-18","title":"0.0.1 - 2021-08-18","text":""},{"location":"about/changelog/#added_22","title":"Added","text":"<ul> <li>Support for IDOM within the Django</li> </ul>"},{"location":"about/contributing/","title":"Contributor Guide","text":""},{"location":"about/contributing/#overview","title":"Overview","text":"<p>      You will need to set up a Python environment to develop ReactPy-Django.  </p> <p>Note</p> <p>Looking to contribute features that are not Django specific?</p> <p>Everything within the <code>reactpy-django</code> repository must be specific to Django integration. Check out the ReactPy Core documentation to contribute general features such as components, hooks, and events.</p>"},{"location":"about/contributing/#creating-a-development-environment","title":"Creating a development environment","text":"<p>If you plan to make code changes to this repository, you will need to install the following dependencies first:</p> <ul> <li>Git</li> <li>Python 3.9+</li> <li>Hatch</li> <li>Bun</li> </ul> <p>Once you finish installing these dependencies, you can clone this repository:</p> <pre><code>git clone https://github.com/reactive-python/reactpy-django.git\ncd reactpy-django\n</code></pre>"},{"location":"about/contributing/#executing-test-environment-commands","title":"Executing test environment commands","text":"<p>By utilizing <code>hatch</code>, the following commands are available to manage the development environment.</p>"},{"location":"about/contributing/#tests","title":"Tests","text":"Command Description <code>hatch test</code> Run Python tests using the current environment's Python version <code>hatch test --all</code> Run tests using all compatible Python versions <code>hatch test --python 3.9</code> Run tests using a specific Python version <code>hatch test --include \"django=5.1\"</code> Run tests using a specific Django version <code>hatch test -k test_object_in_templatetag</code> Run only a specific test <code>hatch test --ds test_app.settings_multi_db</code> Run tests with a specific Django settings file <code>hatch run django:runserver</code> Manually run the Django development server without running tests What other arguments are available to me? <p>The <code>hatch test</code> command is a wrapper for <code>pytest</code>. Hatch \"intercepts\" a handful of arguments, which can be previewed by typing <code>hatch test --help</code>.</p> <p>Any additional arguments in the <code>test</code> command are directly passed on to pytest. See the pytest documentation for what additional arguments are available.</p>"},{"location":"about/contributing/#linting-and-formatting","title":"Linting and Formatting","text":"Command Description <code>hatch fmt</code> Run all linters and formatters <code>hatch fmt --check</code> Run all linters and formatters, but do not save fixes to the disk <code>hatch fmt --linter</code> Run only linters <code>hatch fmt --formatter</code> Run only formatters <code>hatch run javascript:check</code> Run the JavaScript linter/formatter <code>hatch run javascript:fix</code> Run the JavaScript linter/formatter and write fixes to disk Configure your IDE for linting <p>This repository uses <code>hatch fmt</code> for linting and formatting, which is a modestly customized version of <code>ruff</code>.</p> <p>You can install <code>ruff</code> as a plugin to your preferred code editor to create a similar environment.</p>"},{"location":"about/contributing/#documentation","title":"Documentation","text":"Command Description <code>hatch run docs:serve</code> Start the <code>mkdocs</code> server to view documentation locally <code>hatch run docs:build</code> Build the documentation <code>hatch run docs:linkcheck</code> Check for broken links in the documentation <code>hatch run docs:check_examples</code> Run linter on code examples in the documentation"},{"location":"about/contributing/#environment-management","title":"Environment Management","text":"Command Description <code>hatch build --clean</code> Build the package from source <code>hatch env prune</code> Delete all virtual environments created by <code>hatch</code> <code>hatch python install 3.12</code> Install a specific Python version to your system Check out Hatch for all available commands! <p>This documentation only covers commonly used commands.</p> <p>You can type <code>hatch --help</code> to see all available commands.</p>"},{"location":"about/license/","title":"License","text":""},{"location":"about/license/#the-mit-license-mit","title":"The MIT License (MIT)","text":""},{"location":"about/license/#copyright-c-reactive-python-and-affiliates","title":"Copyright (c) Reactive Python and affiliates.","text":"<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p> <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p> <p>THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>"},{"location":"learn/add-reactpy-to-a-django-project/","title":"Add ReactPy to a Django Project","text":""},{"location":"learn/add-reactpy-to-a-django-project/#overview","title":"Overview","text":"<p>  If you want to add some interactivity to your existing Django project, you don't have to rewrite it in ReactPy. Use ReactPy-Django to add ReactPy to your existing stack, and render interactive components anywhere.  </p> <p>Note</p> <p>These docs assumes you have already created a Django project, which involves creating and installing at least one Django app.</p> <p>If do not have a Django project, check out this 9 minute YouTube tutorial created by IDG TECHtalk.</p>"},{"location":"learn/add-reactpy-to-a-django-project/#step-1-install-from-pypi","title":"Step 1: Install from PyPI","text":"<p>Run the following command to install <code>reactpy-django</code> in your Python environment.</p> <pre><code>pip install reactpy-django\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-2-configure-settingspy","title":"Step 2: Configure <code>settings.py</code>","text":"<p>Add <code>\"reactpy_django\"</code> to <code>INSTALLED_APPS</code> in your <code>settings.py</code> file.</p> settings.py <pre><code>INSTALLED_APPS = [\n    ...,\n    \"reactpy_django\",\n]\n</code></pre> Enable ASGI and Django Channels (Required) <p>ReactPy-Django requires Django ASGI and Django Channels WebSockets.</p> <p>If you have not enabled ASGI on your Django project yet, here is a summary of the <code>django</code> and <code>channels</code> installation docs:</p> <ol> <li>Install <code>channels[daphne]</code></li> <li> <p>Add <code>\"daphne\"</code> to <code>INSTALLED_APPS</code>.</p> <pre><code>INSTALLED_APPS = [\n    \"daphne\",\n    ...,\n]\n</code></pre> </li> <li> <p>Set your <code>ASGI_APPLICATION</code> variable.</p> <pre><code>ASGI_APPLICATION = \"example_project.asgi.application\"\n</code></pre> </li> </ol> Configure ReactPy settings (Optional) <p>ReactPy's has additional configuration available to fit a variety of use cases.</p> <p>See the ReactPy settings documentation to learn more.</p>"},{"location":"learn/add-reactpy-to-a-django-project/#step-3-configure-urlspy","title":"Step 3: Configure <code>urls.py</code>","text":"<p>Add ReactPy HTTP paths to your <code>urlpatterns</code> in your <code>urls.py</code> file.</p> urls.py <pre><code>from django.urls import include, path\n\nurlpatterns = [\n    ...,\n    path(\"reactpy/\", include(\"reactpy_django.http.urls\")),\n]\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-4-configure-asgipy","title":"Step 4: Configure <code>asgi.py</code>","text":"<p>Register ReactPy's WebSocket using <code>REACTPY_WEBSOCKET_ROUTE</code> in your <code>asgi.py</code> file.</p> asgi.py <pre><code>import os\n\nfrom django.core.asgi import get_asgi_application\n\n# Ensure DJANGO_SETTINGS_MODULE is set properly based on your project name!\nos.environ.setdefault(\"DJANGO_SETTINGS_MODULE\", \"example_project.settings\")\n\n# Fetch ASGI application before importing dependencies that require ORM models.\ndjango_asgi_app = get_asgi_application()\n\n\nfrom channels.routing import ProtocolTypeRouter, URLRouter  # noqa: E402\nfrom reactpy_django import REACTPY_WEBSOCKET_ROUTE  # noqa: E402\n\napplication = ProtocolTypeRouter(\n    {\n        \"http\": django_asgi_app,\n        \"websocket\": URLRouter([REACTPY_WEBSOCKET_ROUTE]),\n    }\n)\n</code></pre> Add <code>AuthMiddlewareStack</code> (Optional) <p>There are many situations where you need to access the Django <code>User</code> or <code>Session</code> objects within ReactPy components. For example, if you want to:</p> <ol> <li>Access the <code>User</code> that is currently logged in</li> <li>Access Django's <code>Session</code> object</li> <li>Login or logout the current <code>User</code></li> </ol> <p>In these situations will need to ensure you are using <code>AuthMiddlewareStack</code>.</p> <pre><code>from channels.auth import AuthMiddlewareStack  # noqa: E402\n\napplication = ProtocolTypeRouter(\n    {\n        \"http\": django_asgi_app,\n        \"websocket\": AuthMiddlewareStack(URLRouter([REACTPY_WEBSOCKET_ROUTE])),\n    }\n)\n</code></pre> Where is my <code>asgi.py</code>? <p>If you do not have an <code>asgi.py</code>, follow the <code>channels</code> installation guide.</p>"},{"location":"learn/add-reactpy-to-a-django-project/#step-5-run-database-migrations","title":"Step 5: Run database migrations","text":"<p>Run Django's <code>migrate</code> command to initialize ReactPy-Django's database table.</p> <pre><code>python manage.py migrate\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-6-check-your-configuration","title":"Step 6: Check your configuration","text":"<p>Run Django's <code>check</code> command to verify if ReactPy was set up correctly.</p> <pre><code>python manage.py check\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-7-create-your-first-component","title":"Step 7: Create your first component","text":"<p>The next page will show you how to create your first ReactPy component.</p> <p>Prefer a quick summary? Read the At a Glance section below.</p> <p>At a Glance</p> <p><code>my_app/components.py</code></p> <p>You will need a file to define your ReactPy components. We recommend creating a <code>components.py</code> file within your chosen Django app to start out. Within this file, we will create a simple <code>hello_world</code> component.</p> <p> </p> <pre><code>from reactpy import component, html\n\n@component\ndef hello_world(recipient: str):\n    return html.h1(f\"Hello {recipient}!\")\n</code></pre> <p><code>my_app/templates/my_template.html</code></p> <p>In your Django app's HTML template, you can now embed your ReactPy component using the <code>component</code> template tag. Within this tag, you will need to type in the dotted path to the component.</p> <p>Additionally, you can pass in <code>args</code> and <code>kwargs</code> into your component function. After reading the code below, pay attention to how the function definition for <code>hello_world</code> (from the previous example) accepts a <code>recipient</code> argument.</p> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>"},{"location":"learn/your-first-component/","title":"Your First Component","text":""},{"location":"learn/your-first-component/#overview","title":"Overview","text":"<p>  Components are one of the core concepts of ReactPy. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your journey!  </p> <p>Note</p> <p>If you have reached this point, you should have already installed ReactPy-Django through the previous steps.</p>"},{"location":"learn/your-first-component/#selecting-a-django-app","title":"Selecting a Django App","text":"<p>You will now need to pick at least one Django app to start using ReactPy-Django on.</p> <p>For the following examples, we will assume the following:</p> <ol> <li>You have a Django app named <code>my_app</code>, which was created by Django's <code>startapp</code> command.</li> <li>You have placed <code>my_app</code> directly into your Django project folder (<code>./example_project/my_app</code>). This is common for small projects.</li> </ol> How do I organize my Django project for ReactPy? <p>ReactPy-Django has no project structure requirements. Organize everything as you wish, just like any Django project.</p>"},{"location":"learn/your-first-component/#defining-a-component","title":"Defining a component","text":"<p>You will need a file to start creating ReactPy components.</p> <p>We recommend creating a <code>components.py</code> file within your chosen Django app to start out. For this example, the file path will look like this: <code>./example_project/my_app/components.py</code>.</p> <p>Within this file, you will define your component function(s) using the <code>@component</code> decorator.</p> components.py <pre><code>from reactpy import component, html\n\n@component\ndef hello_world(recipient: str):\n    return html.h1(f\"Hello {recipient}!\")\n</code></pre> What should I name my ReactPy files and functions? <p>You have full freedom in naming/placement of your files and functions.</p> <p>We recommend creating a <code>components.py</code> for small Django apps. If your app has a lot of components, you should consider breaking them apart into individual modules such as <code>components/navbar.py</code>.</p> <p>Ultimately, components are referenced by Python dotted path in <code>my_template.html</code> (see next step). This dotted path must be valid to Python's <code>importlib</code>.</p> What does the decorator actually do? <p>While not all components need to be decorated, there are a few features this decorator adds to your components.</p> <ol> <li>The ability to be used as a root component.<ul> <li>The decorator is required for any component that you want to reference in your Django templates (see next step).</li> </ul> </li> <li>The ability to use hooks.<ul> <li>The decorator is required on any component where hooks are defined.</li> </ul> </li> <li>Scoped failures.<ul> <li>If a decorated component generates an exception, then only that one component will fail to render.</li> </ul> </li> </ol>"},{"location":"learn/your-first-component/#embedding-in-a-template","title":"Embedding in a template","text":"<p>In your Django app's HTML template, you can now embed your ReactPy component using the <code>{% component %}</code> template tag. Within this tag, you will need to type in the dotted path to the component.</p> <p>Additionally, you can pass in <code>args</code> and <code>kwargs</code> into your component function. After reading the code below, pay attention to how the function definition for <code>hello_world</code> (from the previous step) accepts a <code>recipient</code> argument.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> Components are automatically registered! <p>ReactPy-Django will automatically register any component that is referenced in a Django HTML template. This means you typically do not need to manually register components in your Django app.</p> <p>Please note that this HTML template must be properly stored within a registered Django app. ReactPy-Django will output a console log message containing all detected components when the server starts up.</p> Do not use context variables for the component path <p>The ReactPy component finder requires that your component path is a string.</p> <p>Do not use Django template/context variables for the component path. Failure to follow this warning will result in render failures.</p> <p>For example, do not do the following:</p> my_template.htmlviews.py <pre><code>&lt;!-- This is good --&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n\n&lt;!-- This is bad --&gt;\n{% component my_variable recipient=\"World\" %}\n</code></pre> <pre><code>from django.shortcuts import render\n\n\ndef example_view(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_variable\": \"example_project.my_app.components.hello_world\"},\n    )\n</code></pre> <p>Note: If you decide to not follow this warning, you will need to use the <code>register_component</code> function to manually register your components.</p> Can I use multiple components on one page? <p>You can add as many components to a webpage as needed by using the template tag multiple times. Retrofitting legacy sites to use ReactPy will typically involve many components on one page.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;body&gt;\n        &lt;h1&gt;{% component \"example_project.my_app.components.my_title\" %}&lt;/h1&gt;\n        &lt;p&gt;{% component \"example_project.my_app_2.components.goodbye_world\" class=\"bold small-font\" %}&lt;/p&gt;\n{% component \"example_project.my_app_3.components.my_button\" %}\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Please note that components separated like this will not be able to interact with each other, except through database queries.</p> <p>Additionally, in scenarios where you are trying to create a Single Page Application (SPA) within Django, you will only have one component within your <code>&lt;body&gt;</code> tag.</p> Where is my templates folder? <p>If you do not have a <code>./templates/</code> folder in your Django app, you can simply create one! Keep in mind, templates within this folder will not be detected by Django unless you add the corresponding Django app to <code>settings.py:INSTALLED_APPS</code>.</p>"},{"location":"learn/your-first-component/#setting-up-a-django-view","title":"Setting up a Django view","text":"<p>Within your Django app's <code>views.py</code> file, you will need to create a view function to render the HTML template <code>my_template.html</code> (from the previous step).</p> views.py <pre><code>from django.shortcuts import render\n\n\ndef index(request):\n    return render(request, \"my_template.html\")\n</code></pre> <p>We will add this new view into your <code>urls.py</code> and define what URL it should be accessible at.</p> urls.py <pre><code>from django.urls import path\nfrom example import views\n\nurlpatterns = [\n    path(\"example/\", views.index),\n]\n</code></pre> Which urls.py do I add my views to? <p>For simple Django projects, you can easily add all of your views directly into the Django project's <code>urls.py</code>. However, as you start increase your project's complexity you might end up with way too much within one file.</p> <p>Once you reach that point, we recommend creating an individual <code>urls.py</code> within each of your Django apps.</p> <p>Then, within your Django project's <code>urls.py</code> you will use Django's <code>include</code> function to link it all together.</p>"},{"location":"learn/your-first-component/#viewing-your-component","title":"Viewing your component","text":"<p>To test your new Django view, run the following command to start up a development web server.</p> <pre><code>python manage.py runserver\n</code></pre> <p>Now you can navigate to your Django project URL that contains a ReactPy component, such as <code>http://127.0.0.1:8000/example/</code> (from the previous step).</p> <p>If you copy-pasted our example component, you will now see your component display \"Hello World\".</p> Do not use <code>manage.py runserver</code> for production <p>This command is only intended for development purposes. For production deployments make sure to read Django's documentation.</p>"},{"location":"learn/your-first-component/#learn-more","title":"Learn more","text":"<p>Congratulations! If you followed the previous steps, you have now created a \"Hello World\" component using ReactPy-Django!</p> <p>Deep Dive</p> <p>The docs you are reading only covers our Django integration. To learn more, check out one of the following links:</p> <ul> <li>ReactPy-Django Feature Reference</li> <li>ReactPy Core Documentation</li> <li>Ask Questions on Discord</li> </ul> <p>Additionally, the vast majority of tutorials/guides you find for ReactJS can be applied to ReactPy.</p>"},{"location":"reference/components/","title":"Components","text":""},{"location":"reference/components/#overview","title":"Overview","text":"<p>  We supply some pre-designed that components can be used to help simplify development.  </p>"},{"location":"reference/components/#pyscript-component","title":"PyScript Component","text":"<p>This allows you to embedded any number of client-side PyScript components within traditional ReactPy components.</p> <p>By default, the only available dependencies are the Python standard library, <code>pyscript</code>, <code>pyodide</code>, <code>reactpy</code> core.</p> <p>The entire file path provided is loaded directly into the browser, and must have a <code>def root()</code> component to act as the entry point.</p> <p>Pitfall</p> <p>Similar to JavaScript, your provided Python file is loaded directly into the client (web browser) as raw text to run using the PyScript interpreter. Be cautious about what you include in your Python file.</p> <p>As a result being client-sided, Python packages within your local environment (such as those installed via <code>pip install ...</code>)  are not accessible within PyScript components.</p> components.pyroot.pymy_template.html <pre><code>from reactpy import component, html\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        \"This text is from my server-side component\",\n        pyscript_component(\"./example_project/my_app/components/root.py\"),\n    )\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    return html.div(\"This text is from my client-side component\")\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.server_side_component\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*file_paths</code> <code>str</code> File path to your client-side component. If multiple paths are provided, the contents are automatically merged. N/A <code>initial</code> <code>str | VdomDict | ComponentType</code> The initial HTML that is displayed prior to the PyScript component loads. This can either be a string containing raw HTML, a <code>reactpy.html</code> snippet, or a non-interactive component. <code>\"\"</code> <code>root</code> <code>str</code> The name of the root component function. <code>\"root\"</code> You must call <code>pyscript_setup</code> in your Django template before using this tag! <p>This requires using of the <code>{% pyscript_setup %}</code> template tag to initialize PyScript on the client.</p> my_template.html <pre><code>{% load reactpy %}\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n</code></pre> How do I execute JavaScript within PyScript components? <p>PyScript components several options available to execute JavaScript, including...</p> <ul> <li>Pyodide's <code>js</code> module</li> <li>Pyscript's foreign function interface</li> <li>Pyscript's JavaScript modules.</li> </ul> <p>Pyodide JS Module</p> <p>The Pyodide <code>js</code> module has access to everything within the browser's JavaScript environment. Therefore, any global JavaScript functions loaded within your HTML <code>&lt;head&gt;</code> can be called as well. However, you will need to be mindful of JavaScript load order if using <code>async</code> or <code>deferred</code> loading!</p> root.py <pre><code>import js\nfrom reactpy import component, html\n\n\n@component\ndef root():\n\n    def onClick(event):\n        js.document.title = \"New window title\"\n\n    return html.button({\"onClick\": onClick}, \"Click Me!\")\n</code></pre> <p>PyScript FFI</p> <p>...</p> <p>PyScript JS Modules</p> <p>Assuming you have a local bundle stored within your project's static files, you can import JavaScript modules in a fashion similar to <code>import {moment} from 'static/moment.js'</code>. You will first need to configure your <code>{% pyscript_setup %}</code> block to make the <code>moment.js</code> module available to PyScript. Then, this module can be accessed within <code>pyscript.js_modules.*</code>.</p> root.pymy_template.html <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    from pyscript.js_modules import moment\n\n    return html.div(\n        {\"id\": \"moment\"},\n        \"Using the JavaScript package 'moment' to calculate time: \",\n        moment.default().format(\"YYYY-MM-DD HH:mm:ss\"),\n    )\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js='{\"/static/moment.js\":\"moment\"}' %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> Does my entire component need to be contained in one file? <p>Splitting a large file into multiple files is a common practice in software development.</p> <p>However, PyScript components are run on the client browser. As such, they do not have access to your local development environment, and thus cannot <code>import</code> any local Python files.</p> <p>If your PyScript component file gets too large, you can declare multiple file paths instead. These files will automatically combined by ReactPy.</p> <p>Here is how we recommend splitting your component into multiple files while avoiding local imports but retaining type hints.</p> components.pyroot.pychild.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/root.py\",\n            \"./example_project/my_app/components/child.py\",\n        ),\n    )\n</code></pre> <pre><code>from typing import TYPE_CHECKING\n\nfrom reactpy import component, html\n\nif TYPE_CHECKING:\n    from .child import child_component\n\n\n@component\ndef root():\n    return html.div(\"This text is from the root component.\", child_component())\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef child_component():\n    return html.div(\"This is a child component from a different file.\")\n</code></pre> How do I display something while the component is loading? <p>You can configure the <code>initial</code> keyword to display HTML while your PyScript component is loading.</p> <p>The value for <code>initial</code> is most commonly be a <code>reactpy.html</code> snippet or a non-interactive <code>@component</code>.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/root.py\",\n            initial=html.div(\"Loading ...\"),\n        ),\n    )\n</code></pre> <p>However, you can also use a string containing raw HTML.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/root.py\",\n            initial=\"&lt;div&gt; Loading ... &lt;/div&gt;\",\n        ),\n    )\n</code></pre> Can I use a different name for my root component? <p>Yes, you can use the <code>root</code> keyword to specify a different name for your root function.</p> components.pymain.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/main.py\",\n            root=\"main\",\n        ),\n    )\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef main():\n    return html.div(\"Hello, World!\")\n</code></pre>"},{"location":"reference/components/#view-to-component","title":"View To Component","text":"<p>Automatically convert a Django view into a component.</p> <p>At this time, this works best with static views with no interactivity.</p> <p>Compatible with sync or async Function Based Views and Class Based Views.</p> components.pyviews.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_component\n\nfrom . import views\n\nhello_world_component = view_to_component(views.hello_world)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>view</code> <code>Callable | View | str</code> The view to convert, or the view's dotted path as a string. N/A <code>transforms</code> <code>Sequence[Callable[[VdomDict], Any]]</code> A list of functions that transforms the newly generated VDOM. The functions will be called on each VDOM node. <code>tuple</code> <code>strict_parsing</code> <code>bool</code> If <code>True</code>, an exception will be generated if the HTML does not perfectly adhere to HTML5. <code>True</code> <p>Returns</p> Type Description <code>constructor</code> A function that takes <code>request, *args, key, **kwargs</code> and returns a ReactPy component. Note that <code>*args</code> and <code>**kwargs</code> are directly provided to your view. Existing limitations <p>There are currently several limitations of using <code>view_to_component</code> that may be resolved in a future version.</p> <ul> <li>Requires manual intervention to change HTTP methods to anything other than <code>GET</code>.</li> <li>ReactPy events cannot conveniently be attached to converted view HTML.</li> <li>Has no option to automatically intercept click events from hyperlinks (such as <code>&lt;a href='example/'&gt;&lt;/a&gt;</code>).</li> </ul> How do I use this for Class Based Views? <p>Class Based Views are accepted by <code>view_to_component</code> as an argument.</p> <p>Calling <code>as_view()</code> is optional, but recommended.</p> components.pyviews.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_component\n\nfrom . import views\n\nhello_world_component = view_to_component(views.HelloWorld.as_view())\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\nfrom django.views import View\n\n\nclass HelloWorld(View):\n    def get(self, request):\n        return HttpResponse(\"Hello World!\")\n</code></pre> How do I provide <code>request</code>, <code>args</code>, and <code>kwargs</code> to a converted view? <p>This component accepts <code>request</code>, <code>*args</code>, and <code>**kwargs</code> arguments, which are sent to your provided view.</p> components.pyviews.py <pre><code>from django.http import HttpRequest\nfrom reactpy import component, html\nfrom reactpy_django.components import view_to_component\n\nfrom . import views\n\nhello_world_component = view_to_component(views.hello_world)\n\n\n@component\ndef my_component():\n    request = HttpRequest()\n    request.method = \"GET\"\n\n    return html.div(\n        hello_world_component(\n            request,  # This request object is optional.\n            \"value_1\",\n            \"value_2\",\n            kwarg1=\"abc\",\n            kwarg2=\"123\",\n        ),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request, arg1, arg2, kwarg1=None, kwarg2=None):\n    return HttpResponse(f\"Hello World! {arg1} {arg2} {kwarg1} {kwarg2}\")\n</code></pre> How do I customize this component's behavior? <p>This component accepts arguments that can be used to customize its behavior.</p> <p>Below are all the arguments that can be used.</p> <p><code>strict_parsing</code></p> <p>By default, an exception will be generated if your view's HTML does not perfectly adhere to HTML5.</p> <p>However, there are some circumstances where you may not have control over the original HTML, so you may be unable to fix it. Or you may be relying on non-standard HTML tags such as <code>&lt;my-tag&gt; Hello World &lt;/my-tag&gt;</code>.</p> <p>In these scenarios, you may want to rely on best-fit parsing by setting the <code>strict_parsing</code> parameter to <code>False</code>. This uses <code>libxml2</code> recovery algorithm, which is designed to be similar to how web browsers would attempt to parse non-standard or broken HTML.</p> components.pyviews.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_component\n\nfrom . import views\n\nhello_world_component = view_to_component(views.hello_world)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <p><code>transforms</code></p> <p>After your view has been turned into VDOM (python dictionaries), <code>view_to_component</code> will call your <code>transforms</code> functions on every VDOM node.</p> <p>This allows you to modify your view prior to rendering.</p> <p>For example, if you are trying to modify the text of a node with a certain <code>id</code>, you can create a transform like such:</p> components.pyviews.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_component\n\nfrom . import views\n\n\ndef example_transform(vdom):\n    attributes = vdom.get(\"attributes\")\n    if attributes and attributes.get(\"id\") == \"hello-world\":\n        vdom[\"children\"][0] = \"Farewell World!\"\n\n\nhello_world_component = view_to_component(\n    views.hello_world, transforms=[example_transform]\n)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse('&lt;div id=\"hello-world\"&gt; Hello World! &lt;/div&gt;')\n</code></pre>"},{"location":"reference/components/#view-to-iframe","title":"View To Iframe","text":"<p>Automatically convert a Django view into an <code>iframe</code> element.</p> <p>The contents of this <code>iframe</code> is handled entirely by traditional Django view rendering. While this solution is compatible with more views than <code>view_to_component</code>, it comes with different limitations.</p> <p>Compatible with sync or async Function Based Views and Class Based Views.</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_iframe\n\nfrom . import views\n\nhello_world_iframe = view_to_iframe(views.hello_world)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\nfrom reactpy_django.utils import register_iframe\n\nfrom . import views\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>view</code> <code>Callable | View | str</code> The view function or class to convert. N/A <code>extra_props</code> <code>Mapping[str, Any] | None</code> Additional properties to add to the <code>iframe</code> element. <code>None</code> <p>Returns</p> Type Description <code>constructor</code> A function that takes <code>*args, key, **kwargs</code> and returns a ReactPy component. Note that <code>*args</code> and <code>**kwargs</code> are directly provided to your view. Existing limitations <p>There are currently several limitations of using <code>view_to_iframe</code> that may be resolved in a future version.</p> <ul> <li>No built-in method of signalling events back to the parent component.</li> <li>All provided <code>*args</code> and <code>*kwargs</code> must be serializable values, since they are encoded into the URL.</li> <li>The <code>iframe</code> will always load after the parent component.</li> <li>CSS styling for <code>iframe</code> elements tends to be awkward/difficult.</li> </ul> How do I use this for Class Based Views? <p>Class Based Views are accepted by <code>view_to_iframe</code> as an argument.</p> <p>Calling <code>as_view()</code> is optional, but recommended.</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_iframe\n\nfrom . import views\n\nhello_world_iframe = view_to_iframe(views.HelloWorld.as_view())\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\nfrom django.views import View\n\n\nclass HelloWorld(View):\n    def get(self, request):\n        return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\nfrom reactpy_django.utils import register_iframe\n\nfrom . import views\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.HelloWorld)\n</code></pre> How do I provide <code>args</code> and <code>kwargs</code> to a converted view? <p>This component accepts <code>*args</code> and <code>**kwargs</code> arguments, which are sent to your provided view.</p> <p>All provided <code>*args</code> and <code>*kwargs</code> must be serializable values, since they are encoded into the URL.</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_iframe\n\nfrom . import views\n\nhello_world_iframe = view_to_iframe(\n    views.hello_world,\n)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(\n            \"value_1\",\n            \"value_2\",\n            kwarg1=\"abc\",\n            kwarg2=\"123\",\n        ),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\nfrom reactpy_django.utils import register_iframe\n\nfrom . import views\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre> How do I customize this component's behavior? <p>This component accepts arguments that can be used to customize its behavior.</p> <p>Below are all the arguments that can be used.</p> <p><code>extra_props</code></p> <p>This component accepts a <code>extra_props</code> parameter, which is a dictionary of additional properties to add to the <code>iframe</code> element.</p> <p>For example, if you want to add a <code>title</code> attribute to the <code>iframe</code> element, you can do so like such:</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import view_to_iframe\n\nfrom . import views\n\nhello_world_iframe = view_to_iframe(\n    views.hello_world, extra_props={\"title\": \"Hello World!\"}\n)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\nfrom reactpy_django.utils import register_iframe\n\nfrom . import views\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre>"},{"location":"reference/components/#django-css","title":"Django CSS","text":"<p>Allows you to defer loading a CSS stylesheet until a component begins rendering. This stylesheet must be stored within Django's static files.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import django_css\n\n\n@component\ndef my_component():\n    return html.div(\n        django_css(\"css/buttons.css\"),\n        html.button(\"My Button!\"),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>static_path</code> <code>str</code> The path to the static file. This path is identical to what you would use on Django's <code>{% static %}</code> template tag. N/A <code>key</code> <code>Key | None</code> A key to uniquely identify this component which is unique amongst a component's immediate siblings <code>None</code> <p>Returns</p> Type Description <code>Component</code> A ReactPy component. Can I load static CSS using <code>html.link</code> instead? <p>While you can load stylesheets with <code>html.link</code>, keep in mind that loading this way does not ensure load order. Thus, your stylesheet will be loaded after your component is displayed. This would likely cause unintended visual behavior, so use this at your own discretion.</p> <p>Here's an example on what you should avoid doing for Django static files:</p> <pre><code>from django.templatetags.static import static\nfrom reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.link({\"rel\": \"stylesheet\", \"href\": static(\"css/buttons.css\")}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> How do I load external CSS? <p><code>django_css</code> can only be used with local static files.</p> <p>For external CSS, you should use <code>html.link</code>.</p> <pre><code>from reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.link(\n            {\"rel\": \"stylesheet\", \"href\": \"https://example.com/external-styles.css\"}\n        ),\n        html.button(\"My Button!\"),\n    )\n</code></pre> Why not load my CSS in <code>&lt;head&gt;</code>? <p>Traditionally, stylesheets are loaded in your <code>&lt;head&gt;</code> using Django's <code>{% static %}</code> template tag.</p> <p>However, to help improve webpage load times you can use this <code>django_css</code> component to defer loading your stylesheet until it is needed.</p>"},{"location":"reference/components/#django-js","title":"Django JS","text":"<p>Allows you to defer loading JavaScript until a component begins rendering. This JavaScript must be stored within Django's static files.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.components import django_js\n\n\n@component\ndef my_component():\n    return html.div(\n        html.button(\"My Button!\"),\n        django_js(\"js/scripts.js\"),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>static_path</code> <code>str</code> The path to the static file. This path is identical to what you would use on Django's <code>{% static %}</code> template tag. N/A <code>key</code> <code>Key | None</code> A key to uniquely identify this component which is unique amongst a component's immediate siblings <code>None</code> <p>Returns</p> Type Description <code>Component</code> A ReactPy component. Can I load static JavaScript using <code>html.script</code> instead? <p>While you can load JavaScript with <code>html.script</code>, keep in mind that loading this way does not ensure load order. Thus, your JavaScript will likely be loaded at an arbitrary time after your component is displayed.</p> <p>Here's an example on what you should avoid doing for Django static files:</p> <pre><code>from django.templatetags.static import static\nfrom reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.script({\"src\": static(\"js/scripts.js\")}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> How do I load external JS? <p><code>django_js</code> can only be used with local static files.</p> <p>For external JavaScript, you should use <code>html.script</code>.</p> <pre><code>from reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.script({\"src\": \"https://example.com/external-scripts.js\"}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> Why not load my JS in <code>&lt;head&gt;</code>? <p>Traditionally, JavaScript is loaded in your <code>&lt;head&gt;</code> using Django's <code>{% static %}</code> template tag.</p> <p>However, to help improve webpage load times you can use this <code>django_js</code> component to defer loading your JavaScript until it is needed.</p>"},{"location":"reference/decorators/","title":"Decorators","text":""},{"location":"reference/decorators/#overview","title":"Overview","text":"<p>  Decorator functions can be used within your <code>components.py</code> to help simplify development.  </p>"},{"location":"reference/decorators/#user-passes-test","title":"User Passes Test","text":"<p>You can limit component access to users that pass a test function by using this decorator.</p> <p>This only works with ReactPy components, and is inspired by Django's <code>user_passes_test</code> decorator.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.decorators import user_passes_test\n\n\ndef is_authenticated(user):\n    return user.is_authenticated\n\n\n@user_passes_test(is_authenticated)\n@component\ndef my_component():\n    return html.div(\"I am logged in!\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>test_func</code> <code>Callable[[AbstractUser], bool]</code> A function that accepts a <code>User</code> returns a boolean. N/A <code>fallback</code> <code>Any | None</code> The content to be rendered if the test fails. Typically is a ReactPy component or VDOM (<code>reactpy.html</code> snippet). <p>Returns</p> Type Description <code>ComponentConstructor</code> A ReactPy component constructor. How do I render a different component if the test fails? <p>You can use a component with the <code>fallback</code> argument, as seen below.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.decorators import user_passes_test\n\n\n@component\ndef my_component_fallback():\n    return html.div(\"I am NOT logged in!\")\n\n\ndef is_authenticated(user):\n    return user.is_authenticated\n\n\n@user_passes_test(is_authenticated, fallback=my_component_fallback)\n@component\ndef my_component():\n    return html.div(\"I am logged in!\")\n</code></pre> How do I render a simple <code>reactpy.html</code> snippet if the test fails? <p>You can use a <code>reactpy.html</code> snippet with the <code>fallback</code> argument, as seen below.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.decorators import user_passes_test\n\n\ndef is_authenticated(user):\n    return user.is_authenticated\n\n\n@user_passes_test(is_authenticated, fallback=html.div(\"I am NOT logged in!\"))\n@component\ndef my_component():\n    return html.div(\"I am logged in!\")\n</code></pre>"},{"location":"reference/hooks/","title":"Hooks","text":""},{"location":"reference/hooks/#overview","title":"Overview","text":"<p>  Prefabricated hooks can be used within your <code>components.py</code> to help simplify development.  </p> <p>Note</p> <p>Looking for standard React hooks?</p> <p>This package only contains Django specific hooks. Standard hooks can be found within <code>reactive-python/reactpy</code>.</p>"},{"location":"reference/hooks/#database-hooks","title":"Database Hooks","text":""},{"location":"reference/hooks/#use-query","title":"Use Query","text":"<p>Execute functions in the background and return the result, typically to read data from the Django ORM.</p> <p>The default postprocessor expects your query function to <code>return</code> a Django <code>Model</code> or <code>QuerySet</code>. This needs to be changed or disabled to execute other types of queries.</p> <p>Query functions can be sync or async.</p> components.pymodels.py <pre><code>from channels.db import database_sync_to_async\nfrom example.models import TodoItem\nfrom reactpy import component, html\nfrom reactpy_django.hooks import use_query\n\n\nasync def get_items():\n    return await database_sync_to_async(TodoItem.objects.all)()\n\n\n@component\ndef todo_list():\n    item_query = use_query(get_items)\n\n    if item_query.loading:\n        rendered_items = html.h2(\"Loading...\")\n    elif item_query.error or not item_query.data:\n        rendered_items = html.h2(\"Error when loading!\")\n    else:\n        rendered_items = html.ul(\n            [html.li(item.text, key=item.pk) for item in item_query.data]\n        )\n\n    return html.div(\"Rendered items: \", rendered_items)\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>query</code> <code>Callable[FuncParams, Awaitable[Inferred]] | Callable[FuncParams, Inferred]</code> A function that executes a query and returns some data. N/A <code>kwargs</code> <code>dict[str, Any] | None</code> Keyword arguments to passed into the <code>query</code> function. <code>None</code> <code>thread_sensitive</code> <code>bool</code> Whether to run your query function in thread sensitive mode. This mode only applies to sync query functions, and is turned on by default due to Django ORM limitations. <code>True</code> <code>postprocessor</code> <code>AsyncPostprocessor | SyncPostprocessor | None</code> A callable that processes the query <code>data</code> before it is returned. The first argument of postprocessor function must be the query <code>data</code>. All proceeding arguments are optional <code>postprocessor_kwargs</code>. This postprocessor function must return the modified <code>data</code>. <code>None</code> <code>postprocessor_kwargs</code> <code>dict[str, Any] | None</code> Keyworded arguments passed into the <code>postprocessor</code> function. <code>None</code> <p>Returns</p> Type Description <code>Query[Inferred]</code> An object containing <code>loading</code>/<code>error</code> states, your <code>data</code> (if the query has successfully executed), and a <code>refetch</code> callable that can be used to re-run the query. How can I provide arguments to my query function? <p><code>kwargs</code> can be provided to your query function via the <code>kwargs=...</code> parameter.</p> components.py <pre><code>from reactpy import component\nfrom reactpy_django.hooks import use_query\n\n\ndef example_query(value: int, other_value: bool = False): ...\n\n\n@component\ndef my_component():\n    query = use_query(example_query, {\"value\": 123, \"other_value\": True})\n\n    return str(query.data)\n</code></pre> How can I customize this hook's behavior? <p>This hook has several parameters that can be used to customize behavior.</p> <p>Below are examples of values that can be modified.</p> <p><code>thread_sensitive</code></p> <p>Whether to run your synchronous query function in thread sensitive mode. Thread sensitive mode is turned on by default due to Django ORM limitations. See Django's <code>sync_to_async</code> docs docs for more information.</p> <p>This setting only applies to sync query functions, and will be ignored for async functions.</p> components.py <pre><code>from reactpy import component\nfrom reactpy_django.hooks import use_query\n\n\ndef execute_thread_safe_operation():\n\"\"\"This is an example query function that does some thread-safe operation.\"\"\"\n    pass\n\n\n@component\ndef my_component():\n    query = use_query(execute_thread_safe_operation, thread_sensitive=False)\n\n    if query.loading or query.error:\n        return None\n\n    return str(query.data)\n</code></pre> <p><code>postprocessor</code></p> <p>By default, automatic recursive fetching of <code>ManyToMany</code> or <code>ForeignKey</code> fields is enabled within the <code>django_query_postprocessor</code>. This is needed to prevent <code>SynchronousOnlyOperation</code> exceptions when accessing these fields within your ReactPy components.</p> <p>However, if you...</p> <ol> <li>Want to use this hook to defer IO intensive tasks to be computed in the background</li> <li>Want to to utilize <code>use_query</code> with a different ORM</li> </ol> <p>... then you can either set a custom <code>postprocessor</code>, or disable all postprocessing behavior by modifying the <code>postprocessor=...</code> parameter. In the example below, we will set the <code>postprocessor</code> to <code>None</code> to disable postprocessing behavior.</p> components.py <pre><code>from reactpy import component\nfrom reactpy_django.hooks import use_query\n\n\ndef execute_io_intensive_operation():\n\"\"\"This is an example query function that does something IO intensive.\"\"\"\n    pass\n\n\n@component\ndef my_component():\n    query = use_query(\n        execute_io_intensive_operation,\n        postprocessor=None,\n    )\n\n    if query.loading or query.error:\n        return None\n\n    return str(query.data)\n</code></pre> <p>If you wish to create a custom <code>postprocessor</code>, you will need to create a function where the first must be the query <code>data</code>. All proceeding arguments are optional <code>postprocessor_kwargs</code> (see below). This <code>postprocessor</code> function must return the modified <code>data</code>.</p> components.py <pre><code>from reactpy import component\nfrom reactpy_django.hooks import use_query\n\n\ndef my_postprocessor(data, example_kwarg=True):\n    if example_kwarg:\n        return data\n\n    return dict(data)\n\n\ndef execute_io_intensive_operation():\n\"\"\"This is an example query function that does something IO intensive.\"\"\"\n    pass\n\n\n@component\ndef my_component():\n    query = use_query(\n        execute_io_intensive_operation,\n        postprocessor=my_postprocessor,\n        postprocessor_kwargs={\"example_kwarg\": False},\n    )\n\n    if query.loading or query.error:\n        return None\n\n    return str(query.data)\n</code></pre> <p><code>postprocessor_kwargs</code></p> <p>By default, automatic recursive fetching of <code>ManyToMany</code> or <code>ForeignKey</code> fields is enabled within the <code>django_query_postprocessor</code>. This is needed to prevent <code>SynchronousOnlyOperation</code> exceptions when accessing these fields within your ReactPy components.</p> <p>However, if you have deep nested trees of relational data, this may not be a desirable behavior. In these scenarios, you may prefer to manually fetch these relational fields using a second <code>use_query</code> hook.</p> <p>You can disable the prefetching behavior of the default <code>postprocessor</code> (located at <code>reactpy_django.utils.django_query_postprocessor</code>) via the <code>postprocessor_kwargs=...</code> parameter.</p> components.py <pre><code>from example.models import TodoItem\nfrom reactpy import component\nfrom reactpy_django.hooks import use_query\n\n\ndef get_model_with_relationships():\n\"\"\"This is an example query function that gets `MyModel` which has a ManyToMany field, and\n    additionally other models that have formed a ForeignKey association to `MyModel`.\n\n    ManyToMany Field: `many_to_many_field`\n    ForeignKey Field: `foreign_key_field_set`\n    \"\"\"\n    return TodoItem.objects.get(id=1)\n\n\n@component\ndef my_component():\n    query = use_query(\n        get_model_with_relationships,\n        postprocessor_kwargs={\"many_to_many\": False, \"many_to_one\": False},\n    )\n\n    if query.loading or query.error or not query.data:\n        return None\n\n    # By disabling `many_to_many` and `many_to_one`, accessing these fields will now\n    # generate a `SynchronousOnlyOperation` exception\n    return f\"{query.data.many_to_many_field} {query.data.foriegn_key_field_set}\"\n</code></pre> <p>Note: In Django's ORM design, the field name to access foreign keys is postfixed with <code>_set</code> by default.</p> Can I make ORM calls without hooks? <p>Due to Django's ORM design, database queries must be deferred using hooks. Otherwise, you will see a <code>SynchronousOnlyOperation</code> exception.</p> <p>These <code>SynchronousOnlyOperation</code> exceptions may be removed in a future version of Django. However, it is best practice to always perform IO operations (such as ORM queries) via hooks to prevent performance issues.</p> Can I make a failed query try again? <p>Yes, <code>use_mutation</code> can be re-executed by calling <code>reset()</code> on your <code>use_mutation</code> instance.</p> <p>For example, take a look at <code>reset_event</code> below.</p> components.pymodels.py <pre><code>from example.models import TodoItem\nfrom reactpy import component, html\nfrom reactpy_django.hooks import use_mutation\n\n\ndef add_item(text: str):\n    TodoItem(text=text).save()\n\n\n@component\ndef todo_list():\n    item_mutation = use_mutation(add_item)\n\n    def reset_event(event):\n        item_mutation.reset()\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.button({\"on_click\": reset_event}, \"Error: Try again!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> Why does the example query function return <code>TodoItem.objects.all()</code>? <p>This design decision was based on Apollo's <code>useQuery</code> hook, but ultimately helps avoid Django's <code>SynchronousOnlyOperation</code> exceptions.</p> <p>With the <code>Model</code> or <code>QuerySet</code> your function returns, this hook uses the default postprocessor to ensure that all deferred or lazy fields are executed.</p>"},{"location":"reference/hooks/#use-mutation","title":"Use Mutation","text":"<p>Modify data in the background, typically to create/update/delete data from the Django ORM.</p> <p>Mutation functions can <code>return False</code> to manually prevent your <code>refetch=...</code> function from executing. All other returns are ignored.</p> <p>Mutation functions can be sync or async.</p> components.pymodels.py <pre><code>from example.models import TodoItem\nfrom reactpy import component, html\nfrom reactpy_django.hooks import use_mutation\n\n\nasync def add_item(text: str):\n    await TodoItem(text=text).asave()\n\n\n@component\ndef todo_list():\n    item_mutation = use_mutation(add_item)\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.h2(\"Error when adding!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>mutation</code> <code>Callable[FuncParams, bool | None] | Callable[FuncParams, Awaitable[bool | None]]</code> A callable that performs Django ORM create, update, or delete functionality. If this function returns <code>False</code>, then your <code>refetch</code> function will not be used. N/A <code>thread_sensitive</code> <code>bool</code> Whether to run the mutation in thread sensitive mode. This mode only applies to sync mutation functions, and is turned on by default due to Django ORM limitations. <code>True</code> <code>refetch</code> <code>Callable[..., Any] | Sequence[Callable[..., Any]] | None</code> A query function (the function you provide to your <code>use_query</code> hook) or a sequence of query functions that need a <code>refetch</code> if the mutation succeeds. This is useful for refreshing data after a mutation has been performed. <code>None</code> <p>Returns</p> Type Description <code>Mutation[FuncParams]</code> An object containing <code>loading</code>/<code>error</code> states, and a <code>reset</code> callable that will set <code>loading</code>/<code>error</code> states to defaults. This object can be called to run the query. How can I provide arguments to my mutation function? <p><code>*args</code> and <code>**kwargs</code> can be provided to your mutation function via <code>mutation(...)</code> parameters.</p> components.py <pre><code>from reactpy import component\nfrom reactpy_django.hooks import use_mutation\n\n\ndef example_mutation(value: int, other_value: bool = False):\n    ...\n\n\n@component\ndef my_component():\n    mutation = use_mutation(example_mutation)\n\n    mutation(123, other_value=True)\n\n    ...\n</code></pre> How can I customize this hook's behavior? <p>This hook has several parameters that can be used to customize behavior.</p> <p>Below are examples of values that can be modified.</p> <p><code>thread_sensitive</code></p> <p>Whether to run your synchronous mutation function in thread sensitive mode. Thread sensitive mode is turned on by default due to Django ORM limitations. See Django's <code>sync_to_async</code> docs docs for more information.</p> <p>This setting only applies to sync query functions, and will be ignored for async functions.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_mutation\n\n\ndef execute_thread_safe_mutation(text):\n\"\"\"This is an example mutation function that does some thread-safe operation.\"\"\"\n    pass\n\n\n@component\ndef my_component():\n    item_mutation = use_mutation(\n        execute_thread_safe_mutation,\n        thread_sensitive=False,\n    )\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading or item_mutation.error:\n        mutation_status = html.h2(\"Doing something...\")\n    elif item_mutation.error:\n        mutation_status = html.h2(\"Error!\")\n    else:\n        mutation_status = html.h2(\"Done.\")\n\n    return html.div(\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> Can I make ORM calls without hooks? <p>Due to Django's ORM design, database queries must be deferred using hooks. Otherwise, you will see a <code>SynchronousOnlyOperation</code> exception.</p> <p>These <code>SynchronousOnlyOperation</code> exceptions may be removed in a future version of Django. However, it is best practice to always perform IO operations (such as ORM queries) via hooks to prevent performance issues.</p> Can I make a failed mutation try again? <p>Yes, <code>use_mutation</code> can be re-executed by calling <code>reset()</code> on your <code>use_mutation</code> instance.</p> <p>For example, take a look at <code>reset_event</code> below.</p> components.pymodels.py <pre><code>from example.models import TodoItem\nfrom reactpy import component, html\nfrom reactpy_django.hooks import use_mutation\n\n\ndef add_item(text: str):\n    TodoItem(text=text).save()\n\n\n@component\ndef todo_list():\n    item_mutation = use_mutation(add_item)\n\n    def reset_event(event):\n        item_mutation.reset()\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.button({\"on_click\": reset_event}, \"Error: Try again!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> Can <code>use_mutation</code> trigger a refetch of <code>use_query</code>? <p>Yes, <code>use_mutation</code> can queue a refetch of a <code>use_query</code> via the <code>refetch=...</code> argument.</p> <p>The example below is a merge of the <code>use_query</code> and <code>use_mutation</code> examples above with the addition of a <code>use_mutation(refetch=...)</code> argument.</p> <p>Please note that <code>refetch</code> will cause all <code>use_query</code> hooks that use <code>get_items</code> in the current component tree will be refetched.</p> components.pymodels.py <pre><code>from example.models import TodoItem\nfrom reactpy import component, html\nfrom reactpy_django.hooks import use_mutation, use_query\n\n\ndef get_items():\n    return TodoItem.objects.all()\n\n\ndef add_item(text: str):\n    TodoItem(text=text).save()\n\n\n@component\ndef todo_list():\n    item_query = use_query(get_items)\n    item_mutation = use_mutation(add_item, refetch=get_items)\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    # Handle all possible query states\n    if item_query.loading:\n        rendered_items = html.h2(\"Loading...\")\n    elif item_query.error or not item_query.data:\n        rendered_items = html.h2(\"Error when loading!\")\n    else:\n        rendered_items = html.ul(\n            html.li(item.text, key=item.pk) for item in item_query.data\n        )\n\n    # Handle all possible mutation states\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.h2(\"Error when adding!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n        rendered_items,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre>"},{"location":"reference/hooks/#use-user-data","title":"Use User Data","text":"<p>Store or retrieve a <code>dict</code> containing user data specific to the connection's <code>User</code>.</p> <p>This hook is useful for storing user-specific data, such as preferences, settings, or any generic key-value pairs.</p> <p>User data saved with this hook is stored within the <code>REACTPY_DATABASE</code>.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_user_data\n\n\n@component\ndef my_component():\n    query, mutation = use_user_data()\n\n    def on_submit(event):\n        if event[\"key\"] == \"Enter\" and query.data:\n            new_key = str(len(query.data))\n            mutation({**query.data, new_key: event[\"target\"][\"value\"]})\n\n    return html.div(\n        html.div(f\"Data: {query.data}\"),\n        html.div(f\"Loading: {query.loading | mutation.loading}\"),\n        html.div(f\"Error(s): {query.error} {mutation.error}\"),\n        html.input({\"on_key_press\": on_submit}),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>default_data</code> <code>None | dict[str, Callable[[], Any] | Callable[[], Awaitable[Any]] | Any]</code> A dictionary containing <code>{key: default_value}</code> pairs. For computationally intensive defaults, your <code>default_value</code> can be sync or async functions that return the value to set. <code>None</code> <code>save_default_data</code> <code>bool</code> If <code>True</code>, <code>default_data</code> values will automatically be stored within the database if they do not exist. <code>False</code> <p>Returns</p> Type Description <code>UserData</code> A <code>NamedTuple</code> containing a <code>Query</code> and <code>Mutation</code> objects used to access/modify user data. Read the <code>use_query</code> and <code>use_mutation</code> docs for more details. How do I set default values? <p>You can configure default user data via the <code>default_data</code> parameter.</p> <p>This parameter accepts a dictionary containing a <code>{key: default_value}</code> pairs. For computationally intensive defaults, your <code>default_value</code> can be sync or async functions that return the value to set.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_user_data\n\n\n@component\ndef my_component():\n    user_data = use_user_data(\n        default_data={\n            \"basic_example\": \"123\",\n            \"computed_example_sync\": sync_default,\n            \"computed_example_async\": async_default,\n        }\n    )\n\n    return html.div(\n        html.div(f\"Data: {user_data.query.data}\"),\n    )\n\n\ndef sync_default():\n    return ...\n\n\nasync def async_default():\n    return ...\n</code></pre>"},{"location":"reference/hooks/#communication-hooks","title":"Communication Hooks","text":""},{"location":"reference/hooks/#use-channel-layer","title":"Use Channel Layer","text":"<p>Subscribe to a Django Channels layer to send/receive messages.</p> <p>Layers are a multiprocessing-safe communication system that allows you to send/receive messages between different parts of your application.</p> <p>This is often used to create chat systems, synchronize data between components, or signal re-renders from outside your components.</p> components.py <pre><code>from reactpy import component, hooks, html\nfrom reactpy_django.hooks import use_channel_layer\n\n\n@component\ndef my_component():\n    async def receive_message(message):\n        set_message(message[\"text\"])\n\n    async def send_message(event):\n        if event[\"key\"] == \"Enter\":\n            await sender({\"text\": event[\"target\"][\"value\"]})\n\n    message, set_message = hooks.use_state(\"\")\n    sender = use_channel_layer(\"my-channel-name\", receiver=receive_message)\n\n    return html.div(\n        f\"Received: {message}\",\n        html.br(),\n        \"Send: \",\n        html.input({\"type\": \"text\", \"onKeyDown\": send_message}),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>name</code> <code>str | None</code> The name of the channel to subscribe to. If you define a <code>group_name</code>, you can keep <code>name</code> undefined to auto-generate a unique name. <code>None</code> <code>group_name</code> <code>str | None</code> If configured, any messages sent within this hook will be broadcasted to all channels in this group. <code>None</code> <code>group_add</code> <code>bool</code> If <code>True</code>, the channel will automatically be added to the group when the component mounts. <code>True</code> <code>group_discard</code> <code>bool</code> If <code>True</code>, the channel will automatically be removed from the group when the component dismounts. <code>True</code> <code>receiver</code> <code>AsyncMessageReceiver | None</code> An async function that receives a <code>message: dict</code> from a channel. If more than one receiver waits on the same channel name, a random receiver will get the result. <code>None</code> <code>layer</code> <code>str</code> The channel layer to use. This layer must be defined in <code>settings.py:CHANNEL_LAYERS</code>. <code>'default'</code> <p>Returns</p> Type Description <code>AsyncMessageSender</code> An async callable that can send a <code>message: dict</code>. Extra Django configuration required <p>In order to use this hook, you will need to configure Django to enable channel layers.</p> <p>The Django Channels documentation has information on what steps you need to take.</p> <p>In summary, you will need to:</p> <ol> <li> <p>Install <code>redis</code> on your machine.</p> </li> <li> <p>Run the following command to install <code>channels-redis</code> in your Python environment.</p> <pre><code>pip install channels-redis\n</code></pre> </li> <li> <p>Configure your <code>settings.py</code> to use <code>RedisChannelLayer</code> as your layer backend.</p> <pre><code>CHANNEL_LAYERS = {\n    \"default\": {\n        \"BACKEND\": \"channels_redis.core.RedisChannelLayer\",\n        \"CONFIG\": {\n            \"hosts\": [(\"127.0.0.1\", 6379)],\n        },\n    },\n}\n</code></pre> </li> </ol> How do I broadcast a message to multiple components? <p>If more than one receiver waits on the same channel, a random one will get the result.</p> <p>To get around this, you can define a <code>group_name</code> to broadcast messages to all channels within a specific group. If you do not define a channel <code>name</code> while using groups, ReactPy will automatically generate a unique channel name for you.</p> <p>In the example below, all messages sent by the <code>sender</code> component will be received by all <code>receiver</code> components that exist (across every active client browser).</p> components.py <pre><code>from reactpy import component, hooks, html\nfrom reactpy_django.hooks import use_channel_layer\n\n\n@component\ndef my_sender_component():\n    sender = use_channel_layer(group_name=\"my-group-name\")\n\n    async def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            await sender({\"text\": event[\"target\"][\"value\"]})\n\n    return html.div(\n        \"Message Sender: \",\n        html.input({\"type\": \"text\", \"onKeyDown\": submit_event}),\n    )\n\n\n@component\ndef my_receiver_component_1():\n    message, set_message = hooks.use_state(\"\")\n\n    async def receive_event(message):\n        set_message(message[\"text\"])\n\n    use_channel_layer(group_name=\"my-group-name\", receiver=receive_event)\n\n    return html.div(f\"Message Receiver 1: {message}\")\n\n\n@component\ndef my_receiver_component_2():\n    message, set_message = hooks.use_state(\"\")\n\n    async def receive_event(message):\n        set_message(message[\"text\"])\n\n    use_channel_layer(group_name=\"my-group-name\", receiver=receive_event)\n\n    return html.div(f\"Message Receiver 2: {message}\")\n</code></pre> How do I signal a re-render from something that isn't a component? <p>There are occasions where you may want to signal a re-render from something that isn't a component, such as a Django model signal.</p> <p>In these cases, you can use the <code>use_channel_layer</code> hook to receive a signal within your component, and then use the <code>get_channel_layer().send(...)</code> to send the signal.</p> <p>In the example below, the sender will signal every time <code>ExampleModel</code> is saved. Then, when the receiver gets this signal, it explicitly calls <code>set_message(...)</code> to trigger a re-render.</p> signals.pycomponents.py <pre><code>from asgiref.sync import async_to_sync\nfrom channels.layers import get_channel_layer\nfrom django.db.models import Model\nfrom django.db.models.signals import pre_save\nfrom django.dispatch import receiver\n\n\nclass ExampleModel(Model): ...\n\n\n@receiver(pre_save, sender=ExampleModel)\ndef my_sender_signal(sender, instance, **kwargs):\n    layer = get_channel_layer()\n\n    # Example of sending a message to a channel\n    async_to_sync(layer.send)(\"my-channel-name\", {\"text\": \"Hello World!\"})\n\n    # Example of sending a message to a group channel\n    async_to_sync(layer.group_send)(\"my-group-name\", {\"text\": \"Hello World!\"})\n</code></pre> <pre><code>from reactpy import component, hooks, html\nfrom reactpy_django.hooks import use_channel_layer\n\n\n@component\ndef my_receiver_component():\n    message, set_message = hooks.use_state(\"\")\n\n    async def receive_event(message):\n        set_message(message[\"text\"])\n\n    use_channel_layer(\"my-channel-name\", receiver=receive_event)\n\n    return html.div(f\"Message Receiver: {message}\")\n</code></pre>"},{"location":"reference/hooks/#connection-hooks","title":"Connection Hooks","text":""},{"location":"reference/hooks/#use-connection","title":"Use Connection","text":"<p>Returns the active connection, which is either a Django WebSocket or a HTTP Request.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_connection\n\n\n@component\ndef my_component():\n    connection = use_connection()\n\n    return html.div(str(connection))\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>Connection</code> An object that contains a <code>carrier</code> (<code>WebSocket</code> or <code>HttpRequest</code>), <code>scope</code>, and <code>location</code>."},{"location":"reference/hooks/#use-scope","title":"Use Scope","text":"<p>Shortcut that returns the WebSocket or HTTP connection's scope.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_scope\n\n\n@component\ndef my_component():\n    scope = use_scope()\n\n    return html.div(str(scope))\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>MutableMapping[str, Any]</code> The connection's <code>scope</code>."},{"location":"reference/hooks/#use-location","title":"Use Location","text":"<p>Shortcut that returns the browser's current <code>Location</code>.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_location\n\n\n@component\ndef my_component():\n    location = use_location()\n\n    return html.div(location.pathname + location.search)\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>Location</code> An object containing the current URL's <code>pathname</code> and <code>search</code> query."},{"location":"reference/hooks/#use-origin","title":"Use Origin","text":"<p>Shortcut that returns the WebSocket or HTTP connection's <code>origin</code>.</p> <p>You can expect this hook to provide strings such as <code>http://example.com</code>.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_origin\n\n\n@component\ndef my_component():\n    origin = use_origin()\n\n    return html.div(origin or \"No origin\")\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>str | None</code> A string containing the browser's current origin, obtained from WebSocket or HTTP headers (if available)."},{"location":"reference/hooks/#use-root-id","title":"Use Root ID","text":"<p>Shortcut that returns the root component's <code>id</code> from the WebSocket or HTTP connection.</p> <p>The root ID is a randomly generated <code>uuid4</code>. It is notable to mention that it is persistent across the current connection. The <code>uuid</code> is reset when the page is refreshed.</p> <p>This is useful when used in combination with <code>use_channel_layer</code> to send messages to a specific component instance, and/or retain a backlog of messages in case that component is disconnected via <code>use_channel_layer( ... , group_discard=False)</code>.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_root_id\n\n\n@component\ndef my_component():\n    root_id = use_root_id()\n\n    return html.div(f\"Root ID: {root_id}\")\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>str</code> A string containing the root component's <code>id</code>."},{"location":"reference/hooks/#use-user","title":"Use User","text":"<p>Shortcut that returns the WebSocket or HTTP connection's <code>User</code>.</p> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.hooks import use_user\n\n\n@component\ndef my_component():\n    user = use_user()\n\n    return html.div(user.username)\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>AbstractUser</code> A Django <code>User</code>, which can also be an <code>AnonymousUser</code>."},{"location":"reference/html/","title":"HTML","text":""},{"location":"reference/html/#overview","title":"Overview","text":"<p>  We supply some HTML elements can be used to help simplify development.  </p>"},{"location":"reference/html/#pyscript","title":"PyScript","text":"<p>PyScript code block. The text content of this tag are executed within the PyScript interpreter. This can be used as an alternative to the <code>reactpy.html.script</code>.</p> <p>This is a primitive HTML tag that is leveraged by <code>reactpy_django.components.pyscript_component</code>.</p> <p>The <code>pyscript</code> tag functions identically to HTML tags contained within <code>reactpy.html</code>.</p> components.pymy_template.html <pre><code>from reactpy import component, html\nfrom reactpy_django.html import pyscript\n\nexample_source_code = \"\"\"\nimport js\n\njs.console.log(\"Hello, World!\")\n\"\"\"\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript(example_source_code.strip()),\n    )\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.server_side_component.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> You must call <code>pyscript_setup</code> in your Django template before using this tag! <p>This requires using of the <code>{% pyscript_setup %}</code> template tag to initialize PyScript on the client.</p> my_template.html <pre><code>{% load reactpy %}\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n</code></pre>"},{"location":"reference/management-commands/","title":"Management Commands","text":""},{"location":"reference/management-commands/#overview","title":"Overview","text":"<p>  ReactPy exposes Django management commands that can be used to perform various ReactPy-related tasks.  </p>"},{"location":"reference/management-commands/#clean-reactpy-command","title":"Clean ReactPy Command","text":"<p>Command used to manually clean expired ReactPy data from the database and/or cache.</p> <p>When using this command without arguments, it will perform all cleaning operations. You can limit cleaning to specific operations through arguments such as <code>--sessions</code>.</p> <p>Terminal</p> <pre><code>python manage.py clean_reactpy\n</code></pre> See Interface <p>Type <code>python manage.py clean_reactpy --help</code> to see the available options.</p>"},{"location":"reference/router/","title":"URL Router","text":""},{"location":"reference/router/#overview","title":"Overview","text":"<p>  A Single Page Application URL router, which is a variant of <code>reactpy-router</code> that uses Django conventions.  </p> <p>Note</p> <p>Looking for more details on URL routing?</p> <p>This package only contains Django specific URL routing features. Standard features can be found within <code>reactive-python/reactpy-router</code>.</p>"},{"location":"reference/router/#django-router","title":"Django Router","text":"<p>URL router that enables the ability to conditionally render other components based on the client's current URL <code>path</code>.</p> <p>Pitfall</p> <p>All pages where <code>django_router</code> is used must have identical, or more permissive URL exposure within Django's URL patterns. You can think of the router component as a secondary, client-side router. Django will always handle the initial load of the webpage.</p> <p>You can duplicate all your URL patterns within both Django and ReactPy, but it's easiest to use a wildcard <code>.*</code> within Django's <code>urlpatterns</code> and let ReactPy handle the rest. For example...</p> <pre><code>urlpatterns = [\n    re_path(r\"^.*$\", my_reactpy_router_view),\n]\n</code></pre> components.py <pre><code>from reactpy import component, html\nfrom reactpy_django.router import django_router\nfrom reactpy_router import route\n\n\n@component\ndef my_component():\n    return django_router(\n        route(\"/router/\", html.div(\"Example 1\")),\n        route(\"/router/any/&lt;value&gt;/\", html.div(\"Example 2\")),\n        route(\"/router/integer/&lt;int:value&gt;/\", html.div(\"Example 3\")),\n        route(\"/router/path/&lt;path:value&gt;/\", html.div(\"Example 4\")),\n        route(\"/router/slug/&lt;slug:value&gt;/\", html.div(\"Example 5\")),\n        route(\"/router/string/&lt;str:value&gt;/\", html.div(\"Example 6\")),\n        route(\"/router/uuid/&lt;uuid:value&gt;/\", html.div(\"Example 7\")),\n        route(\"/router/two_values/&lt;int:value&gt;/&lt;str:value2&gt;/\", html.div(\"Example 8\")),\n        route(\"/router/*\", html.div(\"Fallback\")),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*routes</code> <code>Route</code> An object from <code>reactpy-router</code> containing a <code>path</code>, <code>element</code>, and child <code>*routes</code>. N/A <p>Returns</p> Type Description <code>VdomDict | None</code> The matched component/path after it has been fully rendered. How is this different from <code>reactpy_router.browser_router</code>? <p>The <code>django_router</code> component utilizes the same internals as <code>browser_router</code>, but provides a more Django-like URL routing syntax.</p>"},{"location":"reference/settings/","title":"Settings","text":""},{"location":"reference/settings/#overview","title":"Overview","text":"<p>  These are ReactPy-Django's default settings values. You can modify these values in your Django project's <code>settings.py</code> to change the behavior of ReactPy.  </p> <p>Note</p> <p>The default configuration of ReactPy is suitable for the vast majority of use cases.</p> <p>You should only consider changing settings when the necessity arises.</p>"},{"location":"reference/settings/#general-settings","title":"General Settings","text":""},{"location":"reference/settings/#reactpy_url_prefix","title":"<code>REACTPY_URL_PREFIX</code>","text":"<p>Default: <code>\"reactpy/\"</code></p> <p>Example Value(s): <code>\"rp/\"</code>, <code>\"render/reactpy/\"</code></p> <p>The prefix used for all ReactPy WebSocket and HTTP URLs.</p>"},{"location":"reference/settings/#reactpy_default_query_postprocessor","title":"<code>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</code>","text":"<p>Default: <code>\"reactpy_django.utils.django_query_postprocessor\"</code></p> <p>Example Value(s): <code>\"example_project.postprocessor\"</code>, <code>None</code></p> <p>Dotted path to the default <code>reactpy_django.hooks.use_query</code> postprocessor function.</p> <p>Postprocessor functions can be async or sync. Here is an example of a sync postprocessor function:</p> <pre><code>def postprocessor(data):\n    del data[\"foo\"]\n    return data\n</code></pre> <p>Set <code>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</code> to <code>None</code> to disable the default postprocessor.</p>"},{"location":"reference/settings/#reactpy_auth_backend","title":"<code>REACTPY_AUTH_BACKEND</code>","text":"<p>Default: <code>\"django.contrib.auth.backends.ModelBackend\"</code></p> <p>Example Value(s): <code>\"example_project.auth.MyModelBackend\"</code></p> <p>Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:</p> <ol> <li>You are using <code>settings.py:REACTPY_AUTO_RELOGIN=True</code> and...</li> <li>You are using <code>AuthMiddlewareStack</code> and...</li> <li>You are using Django's <code>AUTHENTICATION_BACKENDS</code> setting and...</li> <li>Your Django user model does not define a <code>backend</code> attribute.</li> </ol>"},{"location":"reference/settings/#reactpy_auto_relogin","title":"<code>REACTPY_AUTO_RELOGIN</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Enabling this will cause component WebSocket connections to automatically re-login users that are already authenticated.</p> <p>This is useful to continuously update <code>last_login</code> timestamps and refresh the Django login session.</p>"},{"location":"reference/settings/#performance-settings","title":"Performance Settings","text":""},{"location":"reference/settings/#reactpy_database","title":"<code>REACTPY_DATABASE</code>","text":"<p>Default: <code>\"default\"</code></p> <p>Example Value(s): <code>\"my-reactpy-database\"</code></p> <p>Multiprocessing-safe database used by ReactPy for database-backed hooks and features.</p> <p>If configuring this value, it is mandatory to configure Django to use the ReactPy database router:</p> settings.py <pre><code>DATABASE_ROUTERS = [\"reactpy_django.database.Router\", ...]\n</code></pre>"},{"location":"reference/settings/#reactpy_cache","title":"<code>REACTPY_CACHE</code>","text":"<p>Default: <code>\"default\"</code></p> <p>Example Value(s): <code>\"my-reactpy-cache\"</code></p> <p>Cache used by ReactPy, typically for caching disk operations.</p> <p>We recommend using <code>redis</code>, <code>memcache</code>, or <code>local-memory caching</code>.</p>"},{"location":"reference/settings/#reactpy_backhaul_thread","title":"<code>REACTPY_BACKHAUL_THREAD</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Configures whether ReactPy components are rendered in a dedicated thread.</p> <p>This allows the web server to process other traffic during ReactPy rendering. Vastly improves throughput with web servers such as <code>hypercorn</code> and <code>uvicorn</code>.</p> <p>This setting is incompatible with <code>daphne</code>.</p>"},{"location":"reference/settings/#reactpy_async_rendering","title":"<code>REACTPY_ASYNC_RENDERING</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Configures whether to use an async ReactPy rendering queue. When enabled, large renders will no longer block smaller renders from taking place. Additionally, prevents the rendering queue from being blocked on waiting for async effects to startup/shutdown (which is typically a relatively slow operation).</p> <p>This setting is currently experimental, and currently no effort is made to de-duplicate renders. For example, if parent and child components are scheduled to render at the same time, both renders will take place even though a single render of the parent component would have been sufficient.</p>"},{"location":"reference/settings/#reactpy_default_hosts","title":"<code>REACTPY_DEFAULT_HOSTS</code>","text":"<p>Default: <code>None</code></p> <p>Example Value(s): <code>[\"localhost:8000\", \"localhost:8001\", \"localhost:8002/subdir\"]</code></p> <p>The default host(s) that can render your ReactPy components.</p> <p>ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. This is typically useful for self-hosted applications.</p> <p>You can use the <code>host</code> argument in your template tag to manually override this default.</p>"},{"location":"reference/settings/#reactpy_prerender","title":"<code>REACTPY_PRERENDER</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Configures whether to pre-render your components via HTTP, which enables SEO compatibility and reduces perceived latency.</p> <p>During pre-rendering, there are some key differences in behavior:</p> <ol> <li>Only the component's first paint is pre-rendered.</li> <li>All <code>connection</code> hooks will provide HTTP variants.</li> <li>The component will be non-interactive until a WebSocket connection is formed.</li> <li>The component is re-rendered once a WebSocket connection is formed.</li> </ol> <p>You can use the <code>prerender</code> argument in your template tag to manually override this default.</p>"},{"location":"reference/settings/#stability-settings","title":"Stability Settings","text":""},{"location":"reference/settings/#reactpy_reconnect_interval","title":"<code>REACTPY_RECONNECT_INTERVAL</code>","text":"<p>Default: <code>750</code></p> <p>Example Value(s): <code>100</code>, <code>2500</code>, <code>6000</code></p> <p>Milliseconds between client reconnection attempts.</p>"},{"location":"reference/settings/#reactpy_reconnect_backoff_multiplier","title":"<code>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</code>","text":"<p>Default: <code>1.25</code></p> <p>Example Value(s): <code>1</code>, <code>1.5</code>, <code>3</code></p> <p>On each reconnection attempt, the <code>REACTPY_RECONNECT_INTERVAL</code> will be multiplied by this value to increase the time between attempts.</p> <p>You can keep time between each reconnection the same by setting this to <code>1</code>.</p>"},{"location":"reference/settings/#reactpy_reconnect_max_interval","title":"<code>REACTPY_RECONNECT_MAX_INTERVAL</code>","text":"<p>Default: <code>60000</code></p> <p>Example Value(s): <code>10000</code>, <code>25000</code>, <code>900000</code></p> <p>Maximum milliseconds between client reconnection attempts.</p> <p>This allows setting an upper bound on how high <code>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</code> can increase the time between reconnection attempts.</p>"},{"location":"reference/settings/#reactpy_reconnect_max_retries","title":"<code>REACTPY_RECONNECT_MAX_RETRIES</code>","text":"<p>Default: <code>150</code></p> <p>Example Value(s): <code>0</code>, <code>5</code>, <code>300</code></p> <p>Maximum number of reconnection attempts before the client gives up.</p>"},{"location":"reference/settings/#reactpy_session_max_age","title":"<code>REACTPY_SESSION_MAX_AGE</code>","text":"<p>Default: <code>259200</code></p> <p>Example Value(s): <code>0</code>, <code>60</code>, <code>96000</code></p> <p>Maximum seconds a ReactPy component session is valid for. Invalid sessions are deleted during ReactPy clean up.</p> <p>ReactPy sessions include data such as <code>*args</code> and <code>**kwargs</code> passed into your <code>{% component %}</code> template tag.</p> <p>Use <code>0</code> to not store any session data.</p>"},{"location":"reference/settings/#auto-clean-settings","title":"Auto-Clean Settings","text":""},{"location":"reference/settings/#reactpy_clean_interval","title":"<code>REACTPY_CLEAN_INTERVAL</code>","text":"<p>Default: <code>604800</code></p> <p>Example Value(s): <code>0</code>, <code>3600</code>, <code>86400</code>, <code>None</code></p> <p>Minimum seconds between ReactPy automatic clean up operations.</p> <p>After a component disconnection, the server will perform a clean up if this amount of time has passed since the last clean up.</p> <p>Set this value to <code>None</code> to disable automatic clean up operations.</p>"},{"location":"reference/settings/#reactpy_clean_sessions","title":"<code>REACTPY_CLEAN_SESSIONS</code>","text":"<p>Default: <code>True</code></p> <p>Example Value(s): <code>False</code></p> <p>Configures whether ReactPy should clean up expired component sessions during automatic clean up operations.</p>"},{"location":"reference/settings/#reactpy_clean_user_data","title":"<code>REACTPY_CLEAN_USER_DATA</code>","text":"<p>Default: <code>True</code></p> <p>Example Value(s): <code>False</code></p> <p>Configures whether ReactPy should clean up orphaned user data during automatic clean up operations.</p> <p>Typically, user data does not become orphaned unless the server crashes during a <code>User</code> delete operation.</p>"},{"location":"reference/template-tag/","title":"Template Tag","text":""},{"location":"reference/template-tag/#overview","title":"Overview","text":"<p>  Django template tags can be used within your HTML templates to provide ReactPy features.  </p>"},{"location":"reference/template-tag/#component","title":"Component","text":"<p>This template tag can be used to insert any number of server-side ReactPy components onto your page.</p> <p>Each component loaded via this template tag will receive a dedicated WebSocket connection to the server.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>dotted_path</code> <code>str</code> The dotted path to the component to render. N/A <code>*args</code> <code>Any</code> The positional arguments to provide to the component. N/A <code>class</code> <code>str | None</code> The HTML class to apply to the top-level component div. <code>None</code> <code>key</code> <code>Any</code> Force the component's root node to use a specific key value. Using <code>key</code> within a template tag is effectively useless. <code>None</code> <code>host</code> <code>str | None</code> The host to use for ReactPy connections. If unset, the host will be automatically configured.Example values include: <code>localhost:8000</code>, <code>example.com</code>, <code>example.com/subdir</code> <code>None</code> <code>prerender</code> <code>str</code> If <code>\"true\"</code> the component will pre-rendered, which enables SEO compatibility and reduces perceived latency. <code>\"false\"</code> <code>offline</code> <code>str</code> The dotted path to a component that will be displayed if your root component loses connection to the server. Keep in mind, this <code>offline</code> component will be non-interactive (hooks won't operate). <code>\"\"</code> <code>**kwargs</code> <code>Any</code> The keyword arguments to provide to the component. N/A Do not use context variables for the component path <p>The ReactPy component finder requires that your component path is a string.</p> <p>Do not use Django template/context variables for the component path. Failure to follow this warning will result in render failures.</p> <p>For example, do not do the following:</p> my_template.htmlviews.py <pre><code>&lt;!-- This is good --&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n\n&lt;!-- This is bad --&gt;\n{% component my_variable recipient=\"World\" %}\n</code></pre> <pre><code>from django.shortcuts import render\n\n\ndef example_view(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_variable\": \"example_project.my_app.components.hello_world\"},\n    )\n</code></pre> <p>Note: If you decide to not follow this warning, you will need to use the <code>register_component</code> function to manually register your components.</p> Can I use multiple components on one page? <p>You can add as many components to a webpage as needed by using the template tag multiple times. Retrofitting legacy sites to use ReactPy will typically involve many components on one page.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;body&gt;\n        &lt;h1&gt;{% component \"example_project.my_app.components.my_title\" %}&lt;/h1&gt;\n        &lt;p&gt;{% component \"example_project.my_app_2.components.goodbye_world\" class=\"bold small-font\" %}&lt;/p&gt;\n{% component \"example_project.my_app_3.components.my_button\" %}\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Please note that components separated like this will not be able to interact with each other, except through database queries.</p> <p>Additionally, in scenarios where you are trying to create a Single Page Application (SPA) within Django, you will only have one component within your <code>&lt;body&gt;</code> tag.</p> Can I use positional arguments instead of keyword arguments? <p>You can use any combination of <code>*args</code>/<code>**kwargs</code> in your template tag.</p> my_template.htmlcomponents.py <pre><code>{% component \"example_project.my_app.components.frog_greeter\" 123 \"Mr. Froggles\" species=\"Grey Treefrog\" %}\n</code></pre> <pre><code>from reactpy import component\n\n\n@component\ndef frog_greeter(number, name, species=\"\"):\n    return f\"Hello #{number}, {name} the {species}!\"\n</code></pre> Can I render components on a different server (distributed computing)? <p>Yes! This is most commonly done through <code>settings.py:REACTPY_HOSTS</code>. However, you can use the <code>host</code> keyword to render components on a specific ASGI server.</p> my_template.html <pre><code>...\n{% component \"example_project.my_app.components.do_something\" host=\"127.0.0.1:8001\" %}\n...\n</code></pre> <p>This configuration most commonly involves you deploying multiple instances of your project. But, you can also create dedicated Django project(s) that only render specific ReactPy components if you wish.</p> <p>Here's a couple of things to keep in mind:</p> <ol> <li>If your host address are completely separate ( <code>origin1.com != origin2.com</code> ) you will need to configure CORS headers on your main application during deployment.</li> <li>You will not need to register ReactPy WebSocket or HTTP paths on any applications that do not perform any component rendering.</li> <li>Your component will only be able to access your template tag's <code>*args</code>/<code>**kwargs</code> if your applications share a common database.</li> </ol> How do I pre-render components for SEO compatibility? <p>This is most commonly done through <code>settings.py:REACTPY_PRERENDER</code>. However, you can use the <code>prerender</code> keyword to pre-render a specific component.</p> my_template.html <pre><code>...\n{% component \"example_project.my_app.components.do_something\" prerender=\"true\" %}\n...\n</code></pre> How do I display something when the client disconnects? <p>You can use the <code>offline</code> keyword to display a specific component when the client disconnects from the server.</p> my_template.html <pre><code>...\n{% component \"example_project.my_app.components.do_something\" offline=\"example_project.my_app.components.offline\" %}\n...\n</code></pre> <p>Note: The <code>offline</code> component will be non-interactive (hooks won't operate).</p>"},{"location":"reference/template-tag/#pyscript-component","title":"PyScript Component","text":"<p>This template tag can be used to insert any number of client-side ReactPy components onto your page.</p> <p>By default, the only available dependencies are the Python standard library, <code>pyscript</code>, <code>pyodide</code>, <code>reactpy</code> core.</p> <p>The entire file path provided is loaded directly into the browser, and must have a <code>def root()</code> component to act as the entry point.</p> <p>Pitfall</p> <p>Similar to JavaScript, your provided Python file is loaded directly into the client (web browser) as raw text to run using the PyScript interpreter. Be cautious about what you include in your Python file.</p> <p>As a result being client-sided, Python packages within your local environment (such as those installed via <code>pip install ...</code>)  are not accessible within PyScript components.</p> my_template.htmlhello_world.py <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/hello_world.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    return html.div(\"Hello, World!\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*file_paths</code> <code>str</code> File path to your client-side component. If multiple paths are provided, the contents are automatically merged. N/A <code>initial</code> <code>str | VdomDict | ComponentType</code> The initial HTML that is displayed prior to the PyScript component loads. This can either be a string containing raw HTML, a <code>reactpy.html</code> snippet, or a non-interactive component. <code>\"\"</code> <code>root</code> <code>str</code> The name of the root component function. <code>\"root\"</code> How do I execute JavaScript within PyScript components? <p>PyScript components several options available to execute JavaScript, including...</p> <ul> <li>Pyodide's <code>js</code> module</li> <li>Pyscript's foreign function interface</li> <li>Pyscript's JavaScript modules.</li> </ul> <p>Pyodide JS Module</p> <p>The Pyodide <code>js</code> module has access to everything within the browser's JavaScript environment. Therefore, any global JavaScript functions loaded within your HTML <code>&lt;head&gt;</code> can be called as well. However, you will need to be mindful of JavaScript load order if using <code>async</code> or <code>deferred</code> loading!</p> root.py <pre><code>import js\nfrom reactpy import component, html\n\n\n@component\ndef root():\n\n    def onClick(event):\n        js.document.title = \"New window title\"\n\n    return html.button({\"onClick\": onClick}, \"Click Me!\")\n</code></pre> <p>PyScript FFI</p> <p>...</p> <p>PyScript JS Modules</p> <p>Assuming you have a local bundle stored within your project's static files, you can import JavaScript modules in a fashion similar to <code>import {moment} from 'static/moment.js'</code>. You will first need to configure your <code>{% pyscript_setup %}</code> block to make the <code>moment.js</code> module available to PyScript. Then, this module can be accessed within <code>pyscript.js_modules.*</code>.</p> root.pymy_template.html <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    from pyscript.js_modules import moment\n\n    return html.div(\n        {\"id\": \"moment\"},\n        \"Using the JavaScript package 'moment' to calculate time: \",\n        moment.default().format(\"YYYY-MM-DD HH:mm:ss\"),\n    )\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js='{\"/static/moment.js\":\"moment\"}' %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> Does my entire component need to be contained in one file? <p>Splitting a large file into multiple files is a common practice in software development.</p> <p>However, PyScript components are run on the client browser. As such, they do not have access to your local development environment, and thus cannot <code>import</code> any local Python files.</p> <p>If your PyScript component file gets too large, you can declare multiple file paths instead. These files will automatically combined by ReactPy.</p> <p>Here is how we recommend splitting your component into multiple files while avoiding local imports but retaining type hints.</p> my_template.htmlroot.pychild.py <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/root.py\"\n    \"./example_project/my_app/components/child.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> <pre><code>from typing import TYPE_CHECKING\n\nfrom reactpy import component, html\n\nif TYPE_CHECKING:\n    from .child import child_component\n\n\n@component\ndef root():\n    return html.div(\"This text is from the root component.\", child_component())\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef child_component():\n    return html.div(\"This is a child component from a different file.\")\n</code></pre> How do I display something while the component is loading? <p>You can configure the <code>initial</code> keyword to display HTML while your PyScript component is loading.</p> <p>The value for <code>initial</code> is most commonly be a string containing raw HTML.</p> my_template.html <pre><code>&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/root.py\" initial=\"&lt;div&gt; Loading ... &lt;/div&gt;\" %}\n&lt;/body&gt;\n</code></pre> <p>However, you can also insert a <code>reactpy.html</code> snippet or a non-interactive <code>@component</code> via template context.</p> my_template.htmlviews.py <pre><code>&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/root.py\" initial=my_initial_object %}\n&lt;/body&gt;\n</code></pre> <pre><code>from django.shortcuts import render\nfrom reactpy import html\n\n\ndef index(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_initial_object\": html.div(\"Loading ...\")},\n    )\n</code></pre> Can I use a different name for my root component? <p>Yes, you can use the <code>root</code> keyword to specify a different name for your root function.</p> my_template.htmlmain.py <pre><code>&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/main.py\" root=\"main\" %}\n&lt;/body&gt;\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef main():\n    return html.div(\"Hello, World!\")\n</code></pre>"},{"location":"reference/template-tag/#pyscript-setup","title":"PyScript Setup","text":"<p>This template tag configures the current page to be able to run <code>pyscript</code>.</p> <p>You can optionally use this tag to configure the current PyScript environment. For example, you can include a list of Python packages to automatically install within the PyScript environment.</p> my_template.html <pre><code>{% load reactpy %}\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*extra_py</code> <code>str</code> Dependencies that need to be loaded on the page for your PyScript components. Each dependency must be contained within it's own string and written in Python requirements file syntax. N/A <code>extra_js</code> <code>str | dict</code> A JSON string or Python dictionary containing a vanilla JavaScript module URL and the <code>name: str</code> to access it within <code>pyscript.js_modules.*</code>. <code>\"\"</code> <code>config</code> <code>str | dict</code> A JSON string or Python dictionary containing PyScript configuration values. <code>\"\"</code> How do I install additional Python dependencies? <p>Dependencies must be available on <code>pypi</code> and declared in your <code>{% pyscript_setup %}</code> block using Python requirements file syntax.</p> <p>These dependencies are automatically downloaded and installed into the PyScript client-side environment when the page is loaded.</p> my_template.html <pre><code>&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup \"dill==0.3.5\" \"markdown&lt;=3.6.0\" \"nest_asyncio\" \"titlecase\" %}\n&lt;/head&gt;\n</code></pre> How do I install additional Javascript dependencies? <p>You can use the <code>extra_js</code> keyword to load additional JavaScript modules into your PyScript environment.</p> my_template.htmlviews.py <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js=my_extra_js_object %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> <pre><code>from django.shortcuts import render\nfrom django.templatetags.static import static\n\n\ndef index(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_extra_js_object\": {static(\"moment.js\"): \"moment\"}},\n    )\n</code></pre> <p>The value for <code>extra_js</code> is most commonly a Python dictionary, but JSON strings are also supported.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js='{\"/static/moment.js\":\"moment\"}' %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> How do I modify the <code>pyscript</code> default configuration? <p>You can modify the default PyScript configuration by providing a value to the <code>config</code> keyword.</p> my_template.html <pre><code>&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup config='{\"experimental_create_proxy\":\"auto\"}' %}\n&lt;/head&gt;\n</code></pre> <p>While this value is most commonly a JSON string, Python dictionary objects are also supported.</p> my_template.htmlviews.py <pre><code>&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup config=my_config_object %}\n&lt;/head&gt;\n</code></pre> <pre><code>from django.shortcuts import render\n\n\ndef index(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_config_object\": {\"experimental_create_proxy\": \"auto\"}},\n    )\n</code></pre> Can I use a local interpreter for PyScript? <p>Yes, you can set up a local interpreter by following PyScript's standard documentation.</p> <p>To summarize,</p> <ol> <li>Download the latest Pyodide bundle from the Pyodide GitHub releases page (for example <code>pyodide-0.26.3.tar.bz2</code>).</li> <li>Extract the contents of the bundle to your project's static files.</li> <li> <p>Configure your <code>{% pyscript_setup %}</code> template tag to use <code>pyodide</code> as an interpreter.</p> <pre><code>{% pyscript_setup config='{\"interpreter\":\"/static/pyodide/pyodide.mjs\"}' %}\n</code></pre> </li> </ol>"},{"location":"reference/utils/","title":"Utilities","text":""},{"location":"reference/utils/#overview","title":"Overview","text":"<p>  Utility functions provide various miscellaneous functionality for advanced use cases.  </p> <p>Pitfall</p> <p>Any utility functions not documented here are not considered part of the public API and may change without notice.</p>"},{"location":"reference/utils/#register-iframe","title":"Register Iframe","text":"<p>This function is used register a Django view as a ReactPy <code>iframe</code>.</p> <p>It is mandatory to use this function alongside <code>view_to_iframe</code>.</p> apps.py <pre><code>from django.apps import AppConfig\nfrom reactpy_django.utils import register_iframe\n\nfrom . import views\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>view</code> <code>Callable | View | str</code> The view to register. Can be a function or class based view, or a dotted path to a view. N/A <p>Returns</p> <p><code>None</code></p> Only use this within <code>AppConfig.ready()</code> <p>You should always call <code>register_iframe</code> within a Django <code>AppConfig.ready()</code> method. This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.</p>"},{"location":"reference/utils/#register-component","title":"Register Component","text":"<p>This function is used register a root component with ReactPy.</p> <p>Typically, this function is automatically called on all components contained within Django templates.</p> apps.py <pre><code>from django.apps import AppConfig\nfrom reactpy_django.utils import register_component\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_component(\"example_project.my_app.components.hello_world\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>component</code> <code>ComponentConstructor | str</code> The component to register. Can be a component function or dotted path to a component. N/A <p>Returns</p> <p><code>None</code></p> Only use this within <code>MyAppConfig.ready()</code> <p>You should always call <code>register_component</code> within a Django <code>MyAppConfig.ready()</code> method. This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.</p> Do I need to use this? <p>You typically will not need to use this function.</p> <p>For security reasons, ReactPy requires all root components to be registered. However, all components contained within Django templates are automatically registered.</p> <p>This function is commonly needed when you have configured your <code>host</code> to a dedicated Django rendering application that doesn't have templates.</p>"},{"location":"reference/utils/#django-query-postprocessor","title":"Django Query Postprocessor","text":"<p>This is the default postprocessor for the <code>use_query</code> hook.</p> <p>Since ReactPy is rendered within an <code>asyncio</code> loop, this postprocessor is exists to prevent Django's <code>SynchronousOnlyException</code> by recursively prefetching fields within Django's ORM. Note that this effectively eliminates Django's lazy execution behavior.</p> components.pymodels.py <pre><code>from example.models import TodoItem\nfrom reactpy import component\nfrom reactpy_django.hooks import use_query\nfrom reactpy_django.utils import django_query_postprocessor\n\n\ndef get_items():\n    return TodoItem.objects.all()\n\n\n@component\ndef todo_list():\n    # These postprocessor options are functionally equivalent to ReactPy-Django's default values\n    item_query = use_query(\n        get_items,\n        postprocessor=django_query_postprocessor,\n        postprocessor_kwargs={\"many_to_many\": True, \"many_to_one\": True},\n    )\n\n    return item_query.data\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>data</code> <code>QuerySet | Model</code> The <code>Model</code> or <code>QuerySet</code> to recursively fetch fields from. N/A <code>many_to_many</code> <code>bool</code> Whether or not to recursively fetch <code>ManyToManyField</code> relationships. <code>True</code> <code>many_to_one</code> <code>bool</code> Whether or not to recursively fetch <code>ForeignKey</code> relationships. <code>True</code> <p>Returns</p> Type Description <code>QuerySet | Model</code> The <code>Model</code> or <code>QuerySet</code> with all fields fetched."}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"about/changelog/","title":"Changelog","text":"<p>    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.    </p>"},{"location":"about/changelog/#unreleased","title":"Unreleased","text":""},{"location":"about/changelog/#fixed","title":"Fixed","text":"<ul> <li>Fixed regression in v5.1.0 where components would sometimes not output debug messages when <code>settings.py:DEBUG</code> is enabled.</li> </ul>"},{"location":"about/changelog/#changed","title":"Changed","text":"<ul> <li>Set upper limit on ReactPy version to <code>&lt;2.0.0</code>.</li> <li>ReactPy web modules are now streamed in chunks.</li> <li>ReactPy web modules are now streamed using asynchronous file reading to improve performance.</li> <li>Performed refactoring to utilize <code>ruff</code> as this repository's linter.</li> </ul>"},{"location":"about/changelog/#510-2024-11-24","title":"5.1.0 - 2024-11-24","text":""},{"location":"about/changelog/#added","title":"Added","text":"<ul> <li><code>settings.py:REACTPY_ASYNC_RENDERING</code> to enable asynchronous rendering of components.</li> </ul>"},{"location":"about/changelog/#changed_1","title":"Changed","text":"<ul> <li>Bumped the minimum ReactPy version to <code>1.1.0</code>.</li> </ul>"},{"location":"about/changelog/#500-2024-10-22","title":"5.0.0 - 2024-10-22","text":""},{"location":"about/changelog/#changed_2","title":"Changed","text":"<ul> <li>Now using ReactPy-Router v1 for URL routing, which comes with a slightly different API than before.</li> <li>Removed dependency on <code>aiofile</code>.</li> </ul>"},{"location":"about/changelog/#removed","title":"Removed","text":"<ul> <li>Removed the following deprecated features:<ul> <li>The <code>compatibility</code> argument on <code>reactpy_django.components.view_to_component</code></li> <li><code>reactpy_django.components.view_to_component</code> usage as a decorator</li> <li><code>reactpy_django.decorators.auth_required</code></li> <li><code>reactpy_django.REACTPY_WEBSOCKET_PATH</code></li> <li><code>settings.py:REACTPY_WEBSOCKET_URL</code></li> </ul> </li> </ul>"},{"location":"about/changelog/#400-2024-06-22","title":"4.0.0 - 2024-06-22","text":""},{"location":"about/changelog/#added_1","title":"Added","text":"<ul> <li>Client-side Python components can now be rendered via the new <code>{% pyscript_component %}</code> template tag<ul> <li>You must first call the <code>{% pyscript_setup %}</code> template tag to load PyScript dependencies</li> </ul> </li> <li>Client-side components can be embedded into existing server-side components via <code>reactpy_django.components.pyscript_component</code>.</li> <li>Tired of writing JavaScript? You can now write PyScript code that runs directly within client browser via the <code>reactpy_django.html.pyscript</code> element.<ul> <li>This is a viable substitution for most JavaScript code.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_3","title":"Changed","text":"<ul> <li> <p>New syntax for <code>use_query</code> and <code>use_mutation</code> hooks. Here's a quick comparison of the changes:</p> <pre><code>query = use_query(QueryOptions(thread_sensitive=True), get_items, foo=\"bar\") # Old\nquery = use_query(get_items, {\"foo\":\"bar\"}, thread_sensitive=True) # New\n\nmutation = use_mutation(MutationOptions(thread_sensitive=True), remove_item) # Old\nmutation = use_mutation(remove_item, thread_sensitive=True) # New\n</code></pre> </li> </ul>"},{"location":"about/changelog/#removed_1","title":"Removed","text":"<ul> <li><code>QueryOptions</code> and <code>MutationOptions</code> have been removed. The value contained within these objects are now passed directly into the hook.</li> </ul>"},{"location":"about/changelog/#fixed_1","title":"Fixed","text":"<ul> <li>Resolved a bug where Django-ReactPy would not properly detect <code>settings.py:DEBUG</code>.</li> </ul>"},{"location":"about/changelog/#381-2024-05-07","title":"3.8.1 - 2024-05-07","text":""},{"location":"about/changelog/#added_2","title":"Added","text":"<ul> <li>Python 3.12 compatibility</li> </ul>"},{"location":"about/changelog/#380-2024-02-20","title":"3.8.0 - 2024-02-20","text":""},{"location":"about/changelog/#added_3","title":"Added","text":"<ul> <li>Built-in cross-process communication mechanism via the <code>reactpy_django.hooks.use_channel_layer</code> hook.</li> <li>Access to the root component's <code>id</code> via the <code>reactpy_django.hooks.use_root_id</code> hook.</li> <li>More robust control over ReactPy clean up tasks!<ul> <li><code>settings.py:REACTPY_CLEAN_INTERVAL</code> to control how often ReactPy automatically performs cleaning tasks.</li> <li><code>settings.py:REACTPY_CLEAN_SESSIONS</code> to control whether ReactPy should clean up expired sessions during automatic cleanups.</li> <li><code>settings.py:REACTPY_CLEAN_USER_DATA</code> to control whether ReactPy should clean up orphaned user data during automatic cleanups.</li> <li><code>python manage.py clean_reactpy</code> command to manually perform ReactPy clean up tasks.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_4","title":"Changed","text":"<ul> <li>Simplified code for cascading deletion of user data.</li> </ul>"},{"location":"about/changelog/#370-2024-01-30","title":"3.7.0 - 2024-01-30","text":""},{"location":"about/changelog/#added_4","title":"Added","text":"<ul> <li>An \"offline component\" can now be displayed when the client disconnects from the server.</li> <li>URL router now supports a <code>*</code> wildcard to create default routes.</li> </ul>"},{"location":"about/changelog/#360-2024-01-10","title":"3.6.0 - 2024-01-10","text":""},{"location":"about/changelog/#added_5","title":"Added","text":"<ul> <li>Built-in Single Page Application (SPA) support!<ul> <li><code>reactpy_django.router.django_router</code> can be used to render your Django application as a SPA.</li> </ul> </li> <li>SEO compatible rendering!<ul> <li><code>settings.py:REACTPY_PRERENDER</code> can be set to <code>True</code> to make components pre-render by default.</li> <li>Or, you can enable it on individual components via the template tag: <code>{% component \"...\" prerender=\"True\" %}</code>.</li> </ul> </li> <li>New <code>view_to_iframe</code> feature!<ul> <li><code>reactpy_django.components.view_to_iframe</code> uses an <code>&lt;iframe&gt;</code> to render a Django view.</li> <li><code>reactpy_django.utils.register_iframe</code> tells ReactPy which views <code>view_to_iframe</code> can use.</li> </ul> </li> <li>New Django <code>User</code> related features!<ul> <li><code>reactpy_django.hooks.use_user</code> can be used to access the current user.</li> <li><code>reactpy_django.hooks.use_user_data</code> provides a simplified interface for storing user key-value data.</li> <li><code>reactpy_django.decorators.user_passes_test</code> is inspired by the equivalent Django decorator, but ours works with ReactPy components.</li> <li><code>settings.py:REACTPY_AUTO_RELOGIN</code> will cause component WebSocket connections to automatically re-login users that are already authenticated. This is useful to continuously update <code>last_login</code> timestamps and refresh the Django login session.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_5","title":"Changed","text":"<ul> <li>Renamed undocumented utility function <code>ComponentPreloader</code> to <code>RootComponentFinder</code>.</li> <li>It is now recommended to call <code>as_view()</code> when using <code>view_to_component</code> or <code>view_to_iframe</code> with Class Based Views.</li> <li>For thread safety, <code>thread_sensitive=True</code> has been enabled in all <code>sync_to_async</code> functions where ORM queries are possible.</li> <li><code>reactpy_django.hooks.use_mutation</code> now has a <code>__call__</code> method. So rather than writing <code>my_mutation.execute(...)</code>, you can now write <code>my_mutation(...)</code>.</li> </ul>"},{"location":"about/changelog/#deprecated","title":"Deprecated","text":"<ul> <li>The <code>compatibility</code> argument on <code>reactpy_django.components.view_to_component</code> is deprecated.<ul> <li>Use <code>view_to_iframe</code> as a replacement.</li> </ul> </li> <li><code>reactpy_django.components.view_to_component</code> usage as a decorator is deprecated.<ul> <li>Check the docs on how to use <code>view_to_component</code> as a function instead.</li> </ul> </li> <li><code>reactpy_django.decorators.auth_required</code> is deprecated.<ul> <li>Use <code>reactpy_django.decorators.user_passes_test</code> instead.</li> <li>An equivalent to <code>auth_required</code>'s default is <code>@user_passes_test(lambda user: user.is_active)</code>.</li> </ul> </li> </ul>"},{"location":"about/changelog/#fixed_2","title":"Fixed","text":"<ul> <li>Fixed a bug where exception stacks would not print on failed component renders.</li> </ul>"},{"location":"about/changelog/#351-2023-09-07","title":"3.5.1 - 2023-09-07","text":""},{"location":"about/changelog/#added_6","title":"Added","text":"<ul> <li>Warning W018 (<code>Suspicious position of 'reactpy_django' in INSTALLED_APPS</code>) has been added.</li> </ul>"},{"location":"about/changelog/#changed_6","title":"Changed","text":"<ul> <li>The default postprocessor can now disabled by setting <code>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</code> to <code>None</code>.</li> <li>Massive overhaul of docs styling.</li> </ul>"},{"location":"about/changelog/#350-2023-08-26","title":"3.5.0 - 2023-08-26","text":""},{"location":"about/changelog/#added_7","title":"Added","text":"<ul> <li>More customization for reconnection behavior through new settings!<ul> <li><code>REACTPY_RECONNECT_INTERVAL</code></li> <li><code>REACTPY_RECONNECT_MAX_INTERVAL</code></li> <li><code>REACTPY_RECONNECT_MAX_RETRIES</code></li> <li><code>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</code></li> </ul> </li> <li>ReactPy-Django docs are now version controlled via mike!</li> </ul>"},{"location":"about/changelog/#changed_7","title":"Changed","text":"<ul> <li>Bumped the minimum ReactPy version to <code>1.0.2</code>.</li> <li>Prettier WebSocket URLs for components that do not have sessions.</li> <li>Template tag will now only validate <code>args</code>/<code>kwargs</code> if <code>settings.py:DEBUG</code> is enabled.</li> <li>Bumped the minimum <code>@reactpy/client</code> version to <code>0.3.1</code></li> <li>Use TypeScript instead of JavaScript for this repository.</li> <li>Bumped the minimum Django version to <code>4.2</code>.</li> </ul> Django 4.2+ is required <p>ReactPy-Django will continue bumping minimum Django requirements to versions that increase async support.</p> <p>This \"latest-only\" trend will continue until Django has all async features that ReactPy benefits from. After this point, ReactPy-Django will begin supporting all maintained Django versions.</p>"},{"location":"about/changelog/#removed_2","title":"Removed","text":"<ul> <li><code>settings.py:REACTPY_RECONNECT_MAX</code> is removed. See the docs for the new <code>REACTPY_RECONNECT_*</code> settings.</li> </ul>"},{"location":"about/changelog/#340-2023-08-18","title":"3.4.0 - 2023-08-18","text":""},{"location":"about/changelog/#added_8","title":"Added","text":"<ul> <li>Distributed Computing: ReactPy components can now optionally be rendered by a completely separate server!<ul> <li><code>REACTPY_DEFAULT_HOSTS</code> setting can round-robin a list of ReactPy rendering hosts.</li> <li><code>host</code> argument has been added to the <code>component</code> template tag to force components to render on a specific host.</li> </ul> </li> <li><code>reactpy_django.utils.register_component</code> function can manually register root components.<ul> <li>Useful if you have dedicated ReactPy rendering application(s) that do not use HTML templates.</li> </ul> </li> </ul>"},{"location":"about/changelog/#changed_8","title":"Changed","text":"<ul> <li>ReactPy will now provide a warning if your HTTP URLs are not on the same prefix as your WebSockets.</li> <li>Cleaner logging output for auto-detected ReactPy root components.</li> </ul>"},{"location":"about/changelog/#deprecated_1","title":"Deprecated","text":"<ul> <li><code>reactpy_django.REACTPY_WEBSOCKET_PATH</code> is deprecated. The identical replacement is <code>REACTPY_WEBSOCKET_ROUTE</code>.</li> <li><code>settings.py:REACTPY_WEBSOCKET_URL</code> is deprecated. The similar replacement is <code>REACTPY_URL_PREFIX</code>.</li> </ul>"},{"location":"about/changelog/#removed_3","title":"Removed","text":"<ul> <li>Warning W007 (<code>REACTPY_WEBSOCKET_URL doesn't end with a slash</code>) has been removed. ReactPy now automatically handles slashes.</li> <li>Warning W008 (<code>REACTPY_WEBSOCKET_URL doesn't start with an alphanumeric character</code>) has been removed. ReactPy now automatically handles this scenario.</li> <li>Error E009 (<code>channels is not in settings.py:INSTALLED_APPS</code>) has been removed. Newer versions of <code>channels</code> do not require installation via <code>INSTALLED_APPS</code> to receive an ASGI web server.</li> </ul>"},{"location":"about/changelog/#332-2023-08-13","title":"3.3.2 - 2023-08-13","text":""},{"location":"about/changelog/#added_9","title":"Added","text":"<ul> <li>ReactPy WebSocket will now decode messages via <code>orjson</code> resulting in an ~6% overall performance improvement.</li> <li>Built-in <code>asyncio</code> event loops are now patched via <code>nest_asyncio</code>, resulting in an ~10% overall performance improvement. This has no performance impact if you are running your web server with <code>uvloop</code>.</li> </ul>"},{"location":"about/changelog/#fixed_3","title":"Fixed","text":"<ul> <li>Fix bug where <code>REACTPY_WEBSOCKET_URL</code> always generates a warning if unset.</li> <li>Fixed bug on Windows where <code>assert f is self._write_fut</code> would be raised by <code>uvicorn</code> when <code>REACTPY_BACKHAUL_THREAD = True</code>.</li> <li>Fixed bug on Windows where rendering behavior would be jittery with <code>daphne</code> when <code>REACTPY_BACKHAUL_THREAD = True</code>.</li> </ul>"},{"location":"about/changelog/#331-2023-08-08","title":"3.3.1 - 2023-08-08","text":""},{"location":"about/changelog/#added_10","title":"Added","text":"<ul> <li>Additional system checks for ReactPy misconfigurations.</li> </ul>"},{"location":"about/changelog/#changed_9","title":"Changed","text":"<ul> <li><code>REACTPY_BACKHAUL_THREAD</code> now defaults to <code>False</code>.</li> </ul>"},{"location":"about/changelog/#330-2023-08-05","title":"3.3.0 - 2023-08-05","text":""},{"location":"about/changelog/#added_11","title":"Added","text":"<ul> <li>Added system checks for a variety of common ReactPy misconfigurations.</li> <li><code>REACTPY_BACKHAUL_THREAD</code> setting to enable/disable threading behavior.</li> </ul>"},{"location":"about/changelog/#changed_10","title":"Changed","text":"<ul> <li>If using <code>settings.py:REACTPY_DATABASE</code>, <code>reactpy_django.database.Router</code> must now be registered in <code>settings.py:DATABASE_ROUTERS</code>.</li> <li>By default, ReactPy will now use a backhaul thread to increase performance.</li> <li>Minimum Python version required is now <code>3.9</code></li> <li>A thread-safe cache is no longer required.</li> </ul>"},{"location":"about/changelog/#321-2023-06-29","title":"3.2.1 - 2023-06-29","text":""},{"location":"about/changelog/#added_12","title":"Added","text":"<ul> <li>Template tag exception details are now rendered on the webpage when <code>settings.py:DEBUG</code> is enabled.</li> </ul>"},{"location":"about/changelog/#fixed_4","title":"Fixed","text":"<ul> <li>Prevent exceptions within the <code>component</code> template tag from causing the whole template to fail to render.</li> </ul>"},{"location":"about/changelog/#320-2023-06-08","title":"3.2.0 - 2023-06-08","text":""},{"location":"about/changelog/#added_13","title":"Added","text":"<ul> <li>Added warning if poor system/cache/database performance is detected while in <code>DEBUG</code> mode.</li> <li>Added <code>REACTPY_AUTH_BACKEND</code> setting to allow for custom authentication backends.</li> </ul>"},{"location":"about/changelog/#changed_11","title":"Changed","text":"<ul> <li>Using <code>SessionMiddlewareStack</code> is now optional.</li> <li>Using <code>AuthMiddlewareStack</code> is now optional.</li> </ul>"},{"location":"about/changelog/#310-2023-05-06","title":"3.1.0 - 2023-05-06","text":""},{"location":"about/changelog/#added_14","title":"Added","text":"<ul> <li><code>use_query</code> now supports async functions.</li> <li><code>use_mutation</code> now supports async functions.</li> <li><code>reactpy_django.types.QueryOptions.thread_sensitive</code> option to customize how sync queries are executed.</li> <li><code>reactpy_django.hooks.use_mutation</code> now accepts <code>reactpy_django.types.MutationOptions</code> option to customize how mutations are executed.</li> </ul>"},{"location":"about/changelog/#changed_12","title":"Changed","text":"<ul> <li>The <code>mutate</code> argument on <code>reactpy_django.hooks.use_mutation</code> has been renamed to <code>mutation</code>.</li> </ul>"},{"location":"about/changelog/#fixed_5","title":"Fixed","text":"<ul> <li>Fix bug where ReactPy utilizes Django's default cache timeout, which can prematurely expire the component cache.</li> </ul>"},{"location":"about/changelog/#301-2023-04-06","title":"3.0.1 - 2023-04-06","text":""},{"location":"about/changelog/#changed_13","title":"Changed","text":"<ul> <li><code>reactpy-django</code> database entries are no longer cleaned during Django application startup. Instead, it will occur on webpage loads if <code>REACTPY_RECONNECT_MAX</code> seconds has elapsed since the last cleaning.</li> </ul>"},{"location":"about/changelog/#300-reactpy-2023-03-30","title":"3.0.0-reactpy - 2023-03-30","text":""},{"location":"about/changelog/#changed_14","title":"Changed","text":"<ul> <li><code>django-idom</code> has been renamed to <code>reactpy-django</code>! Please note that all references to the word <code>idom</code> in your code should be changed to <code>reactpy</code>. See the docs for more details.</li> </ul>"},{"location":"about/changelog/#300-2023-03-08","title":"3.0.0 - 2023-03-08","text":"Note <p>This is Django-IDOM's biggest update yet!</p> <p>To upgrade from previous version you will need to...</p> <ol> <li>Install <code>django-idom &gt;= 3.0.0</code></li> <li>Run <code>idom rewrite-keys &lt;DIR&gt;</code> and <code>idom rewrite-camel-case-props &lt;DIR&gt;</code> to update your <code>idom.html.*</code> calls to the new syntax</li> <li>Run <code>python manage.py migrate</code> to create the new Django-IDOM database entries</li> </ol>"},{"location":"about/changelog/#added_15","title":"Added","text":"<ul> <li>The <code>idom</code> client will automatically configure itself to debug mode depending on <code>settings.py:DEBUG</code>.</li> <li><code>use_connection</code> hook for returning the browser's active <code>Connection</code>.</li> <li><code>IDOM_CACHE</code> is now configurable within <code>settings.py</code> to whatever cache name you wish.</li> </ul>"},{"location":"about/changelog/#changed_15","title":"Changed","text":"<ul> <li>It is now mandatory to run <code>manage.py migrate</code> after installing IDOM.</li> <li>Bumped the minimum IDOM version to 1.0.0. Due to IDOM 1.0.0, <code>idom.html.*</code>...<ul> <li>HTML properties can now be <code>snake_case</code>. For example <code>className</code> now becomes <code>class_name</code>.</li> <li><code>key=...</code> is now declared within the props <code>dict</code> (rather than as a <code>kwarg</code>).</li> </ul> </li> <li>The <code>component</code> template tag now supports both positional and keyword arguments.</li> <li>The <code>component</code> template tag now supports non-serializable arguments.</li> <li><code>IDOM_WS_MAX_RECONNECT_TIMEOUT</code> setting has been renamed to <code>IDOM_RECONNECT_MAX</code>.</li> </ul>"},{"location":"about/changelog/#removed_4","title":"Removed","text":"<ul> <li><code>django_idom.hooks.use_websocket</code> has been removed. The similar replacement is <code>django_idom.hooks.use_connection</code>.</li> <li><code>django_idom.types.IdomWebsocket</code> has been removed. The similar replacement is <code>django_idom.types.Connection</code>.</li> <li><code>settings.py:CACHE['idom']</code> is no longer used by default. The name of the cache back-end must now be specified with the <code>IDOM_CACHE</code> setting.</li> </ul>"},{"location":"about/changelog/#fixed_6","title":"Fixed","text":"<ul> <li><code>view_to_component</code> will now retain the contents of a <code>&lt;head&gt;</code> tag when rendering.</li> <li>React client is now set to <code>production</code> rather than <code>development</code>.</li> <li><code>use_query</code> will now utilize <code>field.related_name</code> when postprocessing many-to-one relationships.</li> </ul>"},{"location":"about/changelog/#security","title":"Security","text":"<ul> <li>Fixed a potential method of component template tag argument spoofing.</li> <li>Exception information will no longer be displayed on the page, based on the value of <code>settings.py:DEBUG</code>.</li> </ul>"},{"location":"about/changelog/#221-2023-01-09","title":"2.2.1 - 2023-01-09","text":""},{"location":"about/changelog/#fixed_7","title":"Fixed","text":"<ul> <li>Fixed bug where <code>use_query</code> would not recursively fetch many-to-one relationships.</li> <li>IDOM preloader will now print out the exception stack when failing to import a module.</li> </ul>"},{"location":"about/changelog/#220-2022-12-28","title":"2.2.0 - 2022-12-28","text":""},{"location":"about/changelog/#added_16","title":"Added","text":"<ul> <li>Add <code>options: QueryOptions</code> parameter to <code>use_query</code> to allow for configuration of this hook.</li> </ul>"},{"location":"about/changelog/#changed_16","title":"Changed","text":"<ul> <li>By default, <code>use_query</code> will recursively prefetch all many-to-many or many-to-one relationships to prevent <code>SynchronousOnlyOperation</code> exceptions.</li> </ul>"},{"location":"about/changelog/#removed_5","title":"Removed","text":"<ul> <li><code>django_idom.hooks._fetch_lazy_fields</code> has been deleted. The equivalent replacement is <code>django_idom.utils.django_query_postprocessor</code>.</li> </ul>"},{"location":"about/changelog/#210-2022-11-01","title":"2.1.0 - 2022-11-01","text":""},{"location":"about/changelog/#changed_17","title":"Changed","text":"<ul> <li>Minimum <code>channels</code> version is now <code>4.0.0</code>.</li> </ul>"},{"location":"about/changelog/#fixed_8","title":"Fixed","text":"<ul> <li>Change type hint on <code>view_to_component</code> callable to have <code>request</code> argument be optional.</li> <li>Change type hint on <code>view_to_component</code> to represent it as a decorator with parenthesis (such as <code>@view_to_component(compatibility=True)</code>)</li> </ul>"},{"location":"about/changelog/#security_1","title":"Security","text":"<ul> <li>Add note to docs about potential information exposure via <code>view_to_component</code> when using <code>compatibility=True</code>.</li> </ul>"},{"location":"about/changelog/#201-2022-10-18","title":"2.0.1 - 2022-10-18","text":""},{"location":"about/changelog/#fixed_9","title":"Fixed","text":"<ul> <li>Ability to use <code>key=...</code> parameter on all prefabricated components.</li> </ul>"},{"location":"about/changelog/#200-2022-10-17","title":"2.0.0 - 2022-10-17","text":""},{"location":"about/changelog/#added_17","title":"Added","text":"<ul> <li><code>use_origin</code> hook for returning the browser's <code>location.origin</code>.</li> </ul>"},{"location":"about/changelog/#changed_18","title":"Changed","text":"<ul> <li><code>view_to_component</code> now returns a <code>Callable</code>, instead of directly returning a <code>Component</code>. Check the docs for new usage info.</li> <li><code>use_mutation</code> and <code>use_query</code> will now log any query failures.</li> </ul>"},{"location":"about/changelog/#fixed_10","title":"Fixed","text":"<ul> <li>Allow <code>use_mutation</code> to have <code>refetch=None</code>, as the docs suggest is possible.</li> <li><code>use_query</code> will now prefetch all fields to prevent <code>SynchronousOnlyOperation</code> exceptions.</li> <li><code>view_to_component</code>, <code>django_css</code>, and <code>django_js</code> type hints will now display like normal functions.</li> <li>IDOM preloader no longer attempts to parse commented out IDOM components.</li> <li>Tests are now fully functional on Windows</li> </ul>"},{"location":"about/changelog/#120-2022-09-19","title":"1.2.0 - 2022-09-19","text":""},{"location":"about/changelog/#added_18","title":"Added","text":"<ul> <li><code>auth_required</code> decorator to prevent your components from rendering to unauthenticated users.</li> <li><code>use_query</code> hook for fetching database values.</li> <li><code>use_mutation</code> hook for modifying database values.</li> <li><code>view_to_component</code> utility to convert legacy Django views to IDOM components.</li> </ul>"},{"location":"about/changelog/#changed_19","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.40.2</li> <li>Testing suite now uses <code>playwright</code> instead of <code>selenium</code></li> </ul>"},{"location":"about/changelog/#fixed_11","title":"Fixed","text":"<ul> <li>IDOM preloader is no longer sensitive to whitespace within template tags.</li> </ul>"},{"location":"about/changelog/#110-2022-07-01","title":"1.1.0 - 2022-07-01","text":""},{"location":"about/changelog/#added_19","title":"Added","text":"<ul> <li><code>django_css</code> and <code>django_js</code> components to defer loading CSS &amp; JS files until needed.</li> </ul>"},{"location":"about/changelog/#changed_20","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.39.0</li> </ul>"},{"location":"about/changelog/#100-2022-05-22","title":"1.0.0 - 2022-05-22","text":""},{"location":"about/changelog/#added_20","title":"Added","text":"<ul> <li>Django specific hooks! <code>use_websocket</code>, <code>use_scope</code>, and <code>use_location</code> are now available within the <code>django_idom.hooks</code> module.</li> <li>Documentation has been placed into a formal docs webpage.</li> <li>Logging for when a component fails to import, or if no components were found within Django.</li> </ul>"},{"location":"about/changelog/#changed_21","title":"Changed","text":"<ul> <li><code>idom_component</code> template tag has been renamed to <code>component</code></li> <li>Bumped the minimum IDOM version to 0.38.0</li> </ul>"},{"location":"about/changelog/#removed_6","title":"Removed","text":"<ul> <li><code>websocket</code> parameter for components has been removed. Functionally, it is replaced with <code>django_idom.hooks.use_websocket</code>.</li> </ul>"},{"location":"about/changelog/#005-2022-04-04","title":"0.0.5 - 2022-04-04","text":""},{"location":"about/changelog/#changed_22","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.37.2</li> </ul>"},{"location":"about/changelog/#fixed_12","title":"Fixed","text":"<ul> <li>ModuleNotFoundError: No module named <code>idom.core.proto</code> caused by IDOM 0.37.2</li> </ul>"},{"location":"about/changelog/#004-2022-03-05","title":"0.0.4 - 2022-03-05","text":""},{"location":"about/changelog/#changed_23","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.37.1</li> </ul>"},{"location":"about/changelog/#003-2022-02-19","title":"0.0.3 - 2022-02-19","text":""},{"location":"about/changelog/#changed_24","title":"Changed","text":"<ul> <li>Bumped the minimum IDOM version to 0.36.3</li> </ul>"},{"location":"about/changelog/#002-2022-01-30","title":"0.0.2 - 2022-01-30","text":""},{"location":"about/changelog/#added_21","title":"Added","text":"<ul> <li>Ability to declare the HTML class of the top-level component <code>div</code></li> <li><code>name = ...</code> parameter to IDOM HTTP paths for use with <code>django.urls.reverse()</code></li> <li>Cache versioning to automatically invalidate old web module files from the cache back-end</li> <li>Automatic pre-population of the IDOM component registry</li> <li>Type hinting for <code>IdomWebsocket</code></li> </ul>"},{"location":"about/changelog/#changed_25","title":"Changed","text":"<ul> <li>Fetching web modules from disk and/or cache is now fully async</li> <li>Static files are now contained within a <code>django_idom/</code> parent folder</li> <li>Upgraded IDOM to version <code>0.36.0</code></li> <li>Minimum Django version required is now <code>4.0</code></li> <li>Minimum Python version required is now <code>3.8</code></li> </ul>"},{"location":"about/changelog/#removed_7","title":"Removed","text":"<ul> <li><code>IDOM_WEB_MODULES_PATH</code> has been replaced with Django <code>include(...)</code></li> <li><code>IDOM_WS_MAX_RECONNECT_DELAY</code> has been renamed to <code>IDOM_WS_MAX_RECONNECT_TIMEOUT</code></li> <li><code>idom_web_modules</code> cache back-end has been renamed to <code>idom</code></li> </ul>"},{"location":"about/changelog/#fixed_13","title":"Fixed","text":"<ul> <li>Increase test timeout values to prevent false positives</li> <li>Windows compatibility for building Django-IDOM</li> </ul>"},{"location":"about/changelog/#security_2","title":"Security","text":"<ul> <li>Fixed potential directory traversal attack on the IDOM web modules URL</li> </ul>"},{"location":"about/changelog/#001-2021-08-18","title":"0.0.1 - 2021-08-18","text":""},{"location":"about/changelog/#added_22","title":"Added","text":"<ul> <li>Support for IDOM within the Django</li> </ul>"},{"location":"about/contributing/","title":"Contributor Guide","text":""},{"location":"about/contributing/#overview","title":"Overview","text":"<p>      You will need to set up a Python environment to develop ReactPy-Django.  </p> <p>Note</p> <p>Looking to contribute features that are not Django specific?</p> <p>Everything within the <code>reactpy-django</code> repository must be specific to Django integration. Check out the ReactPy Core documentation to contribute general features such as components, hooks, and events.</p>"},{"location":"about/contributing/#creating-a-development-environment","title":"Creating a development environment","text":"<p>If you plan to make code changes to this repository, you will need to install the following dependencies first:</p> <ul> <li>Git</li> <li>Python 3.9+</li> <li>Hatch</li> <li>Bun</li> </ul> <p>Once you finish installing these dependencies, you can clone this repository:</p> <pre><code>git clone https://github.com/reactive-python/reactpy-django.git\ncd reactpy-django\n</code></pre>"},{"location":"about/contributing/#executing-test-environment-commands","title":"Executing test environment commands","text":"<p>By utilizing <code>hatch</code>, the following commands are available to manage the development environment.</p>"},{"location":"about/contributing/#tests","title":"Tests","text":"Command Description <code>hatch test</code> Run Python tests using the current environment's Python version <code>hatch test --all</code> Run tests using all compatible Python versions <code>hatch test --python 3.9</code> Run tests using a specific Python version <code>hatch test --include \"django=5.1\"</code> Run tests using a specific Django version <code>hatch test -k test_object_in_templatetag</code> Run only a specific test <code>hatch test --ds test_app.settings_multi_db</code> Run tests with a specific Django settings file <code>hatch run django:runserver</code> Manually run the Django development server without running tests What other arguments are available to me? <p>The <code>hatch test</code> command is a wrapper for <code>pytest</code>. Hatch \"intercepts\" a handful of arguments, which can be previewed by typing <code>hatch test --help</code>.</p> <p>Any additional arguments in the <code>test</code> command are directly passed on to pytest. See the pytest documentation for what additional arguments are available.</p>"},{"location":"about/contributing/#linting-and-formatting","title":"Linting and Formatting","text":"Command Description <code>hatch fmt</code> Run all linters and formatters <code>hatch fmt --check</code> Run all linters and formatters, but do not save fixes to the disk <code>hatch fmt --linter</code> Run only linters <code>hatch fmt --formatter</code> Run only formatters <code>hatch run javascript:check</code> Run the JavaScript linter/formatter <code>hatch run javascript:fix</code> Run the JavaScript linter/formatter and write fixes to disk Configure your IDE for linting <p>This repository uses <code>hatch fmt</code> for linting and formatting, which is a modestly customized version of <code>ruff</code>.</p> <p>You can install <code>ruff</code> as a plugin to your preferred code editor to create a similar environment.</p>"},{"location":"about/contributing/#documentation","title":"Documentation","text":"Command Description <code>hatch run docs:serve</code> Start the <code>mkdocs</code> server to view documentation locally <code>hatch run docs:build</code> Build the documentation <code>hatch run docs:linkcheck</code> Check for broken links in the documentation <code>hatch fmt docs --check</code> Run linter on code examples in the documentation"},{"location":"about/contributing/#environment-management","title":"Environment Management","text":"Command Description <code>hatch build --clean</code> Build the package from source <code>hatch env prune</code> Delete all virtual environments created by <code>hatch</code> <code>hatch python install 3.12</code> Install a specific Python version to your system Check out Hatch for all available commands! <p>This documentation only covers commonly used commands.</p> <p>You can type <code>hatch --help</code> to see all available commands.</p>"},{"location":"about/license/","title":"License","text":""},{"location":"about/license/#the-mit-license-mit","title":"The MIT License (MIT)","text":""},{"location":"about/license/#copyright-c-reactive-python-and-affiliates","title":"Copyright (c) Reactive Python and affiliates.","text":"<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p> <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p> <p>THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>"},{"location":"learn/add-reactpy-to-a-django-project/","title":"Add ReactPy to a Django Project","text":""},{"location":"learn/add-reactpy-to-a-django-project/#overview","title":"Overview","text":"<p>  If you want to add some interactivity to your existing Django project, you don't have to rewrite it in ReactPy. Use ReactPy-Django to add ReactPy to your existing stack, and render interactive components anywhere.  </p> <p>Note</p> <p>These docs assumes you have already created a Django project, which involves creating and installing at least one Django app.</p> <p>If do not have a Django project, check out this 9 minute YouTube tutorial created by IDG TECHtalk.</p>"},{"location":"learn/add-reactpy-to-a-django-project/#step-1-install-from-pypi","title":"Step 1: Install from PyPI","text":"<p>Run the following command to install <code>reactpy-django</code> in your Python environment.</p> <pre><code>pip install reactpy-django\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-2-configure-settingspy","title":"Step 2: Configure <code>settings.py</code>","text":"<p>Add <code>\"reactpy_django\"</code> to <code>INSTALLED_APPS</code> in your <code>settings.py</code> file.</p> settings.py <pre><code>INSTALLED_APPS = [\n    ...,\n    \"reactpy_django\",\n]\n</code></pre> Enable ASGI and Django Channels (Required) <p>ReactPy-Django requires Django ASGI and Django Channels WebSockets.</p> <p>If you have not enabled ASGI on your Django project yet, here is a summary of the <code>django</code> and <code>channels</code> installation docs:</p> <ol> <li>Install <code>channels[daphne]</code></li> <li> <p>Add <code>\"daphne\"</code> to <code>INSTALLED_APPS</code>.</p> <pre><code>INSTALLED_APPS = [\n    \"daphne\",\n    ...,\n]\n</code></pre> </li> <li> <p>Set your <code>ASGI_APPLICATION</code> variable.</p> <pre><code>ASGI_APPLICATION = \"example_project.asgi.application\"\n</code></pre> </li> </ol> Configure ReactPy settings (Optional) <p>ReactPy's has additional configuration available to fit a variety of use cases.</p> <p>See the ReactPy settings documentation to learn more.</p>"},{"location":"learn/add-reactpy-to-a-django-project/#step-3-configure-urlspy","title":"Step 3: Configure <code>urls.py</code>","text":"<p>Add ReactPy HTTP paths to your <code>urlpatterns</code> in your <code>urls.py</code> file.</p> urls.py <pre><code>from django.urls import include, path\n\nurlpatterns = [\n    ...,\n    path(\"reactpy/\", include(\"reactpy_django.http.urls\")),\n]\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-4-configure-asgipy","title":"Step 4: Configure <code>asgi.py</code>","text":"<p>Register ReactPy's WebSocket using <code>REACTPY_WEBSOCKET_ROUTE</code> in your <code>asgi.py</code> file.</p> asgi.py <pre><code>import os\n\nfrom django.core.asgi import get_asgi_application\n\n# Ensure DJANGO_SETTINGS_MODULE is set properly based on your project name!\nos.environ.setdefault(\"DJANGO_SETTINGS_MODULE\", \"example_project.settings\")\n\n# Fetch ASGI application before importing dependencies that require ORM models.\ndjango_asgi_app = get_asgi_application()\n\n\nfrom channels.routing import ProtocolTypeRouter, URLRouter  # noqa: E402\n\nfrom reactpy_django import REACTPY_WEBSOCKET_ROUTE  # noqa: E402\n\napplication = ProtocolTypeRouter({\n    \"http\": django_asgi_app,\n    \"websocket\": URLRouter([REACTPY_WEBSOCKET_ROUTE]),\n})\n</code></pre> Add <code>AuthMiddlewareStack</code> (Optional) <p>There are many situations where you need to access the Django <code>User</code> or <code>Session</code> objects within ReactPy components. For example, if you want to:</p> <ol> <li>Access the <code>User</code> that is currently logged in</li> <li>Access Django's <code>Session</code> object</li> <li>Login or logout the current <code>User</code></li> </ol> <p>In these situations will need to ensure you are using <code>AuthMiddlewareStack</code>.</p> <pre><code>from channels.auth import AuthMiddlewareStack  # noqa: E402\n\napplication = ProtocolTypeRouter({\n    \"http\": django_asgi_app,\n    \"websocket\": AuthMiddlewareStack(URLRouter([REACTPY_WEBSOCKET_ROUTE])),\n})\n</code></pre> Where is my <code>asgi.py</code>? <p>If you do not have an <code>asgi.py</code>, follow the <code>channels</code> installation guide.</p>"},{"location":"learn/add-reactpy-to-a-django-project/#step-5-run-database-migrations","title":"Step 5: Run database migrations","text":"<p>Run Django's <code>migrate</code> command to initialize ReactPy-Django's database table.</p> <pre><code>python manage.py migrate\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-6-check-your-configuration","title":"Step 6: Check your configuration","text":"<p>Run Django's <code>check</code> command to verify if ReactPy was set up correctly.</p> <pre><code>python manage.py check\n</code></pre>"},{"location":"learn/add-reactpy-to-a-django-project/#step-7-create-your-first-component","title":"Step 7: Create your first component","text":"<p>The next page will show you how to create your first ReactPy component.</p> <p>Prefer a quick summary? Read the At a Glance section below.</p> <p>At a Glance</p> <p><code>my_app/components.py</code></p> <p>You will need a file to define your ReactPy components. We recommend creating a <code>components.py</code> file within your chosen Django app to start out. Within this file, we will create a simple <code>hello_world</code> component.</p> <p> </p> <pre><code>from reactpy import component, html\n\n@component\ndef hello_world(recipient: str):\n    return html.h1(f\"Hello {recipient}!\")\n</code></pre> <p><code>my_app/templates/my_template.html</code></p> <p>In your Django app's HTML template, you can now embed your ReactPy component using the <code>component</code> template tag. Within this tag, you will need to type in the dotted path to the component.</p> <p>Additionally, you can pass in <code>args</code> and <code>kwargs</code> into your component function. After reading the code below, pay attention to how the function definition for <code>hello_world</code> (from the previous example) accepts a <code>recipient</code> argument.</p> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>"},{"location":"learn/your-first-component/","title":"Your First Component","text":""},{"location":"learn/your-first-component/#overview","title":"Overview","text":"<p>  Components are one of the core concepts of ReactPy. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your journey!  </p> <p>Note</p> <p>If you have reached this point, you should have already installed ReactPy-Django through the previous steps.</p>"},{"location":"learn/your-first-component/#selecting-a-django-app","title":"Selecting a Django App","text":"<p>You will now need to pick at least one Django app to start using ReactPy-Django on.</p> <p>For the following examples, we will assume the following:</p> <ol> <li>You have a Django app named <code>my_app</code>, which was created by Django's <code>startapp</code> command.</li> <li>You have placed <code>my_app</code> directly into your Django project folder (<code>./example_project/my_app</code>). This is common for small projects.</li> </ol> How do I organize my Django project for ReactPy? <p>ReactPy-Django has no project structure requirements. Organize everything as you wish, just like any Django project.</p>"},{"location":"learn/your-first-component/#defining-a-component","title":"Defining a component","text":"<p>You will need a file to start creating ReactPy components.</p> <p>We recommend creating a <code>components.py</code> file within your chosen Django app to start out. For this example, the file path will look like this: <code>./example_project/my_app/components.py</code>.</p> <p>Within this file, you will define your component function(s) using the <code>@component</code> decorator.</p> components.py <pre><code>from reactpy import component, html\n\n@component\ndef hello_world(recipient: str):\n    return html.h1(f\"Hello {recipient}!\")\n</code></pre> What should I name my ReactPy files and functions? <p>You have full freedom in naming/placement of your files and functions.</p> <p>We recommend creating a <code>components.py</code> for small Django apps. If your app has a lot of components, you should consider breaking them apart into individual modules such as <code>components/navbar.py</code>.</p> <p>Ultimately, components are referenced by Python dotted path in <code>my_template.html</code> (see next step). This dotted path must be valid to Python's <code>importlib</code>.</p> What does the decorator actually do? <p>While not all components need to be decorated, there are a few features this decorator adds to your components.</p> <ol> <li>The ability to be used as a root component.<ul> <li>The decorator is required for any component that you want to reference in your Django templates (see next step).</li> </ul> </li> <li>The ability to use hooks.<ul> <li>The decorator is required on any component where hooks are defined.</li> </ul> </li> <li>Scoped failures.<ul> <li>If a decorated component generates an exception, then only that one component will fail to render.</li> </ul> </li> </ol>"},{"location":"learn/your-first-component/#embedding-in-a-template","title":"Embedding in a template","text":"<p>In your Django app's HTML template, you can now embed your ReactPy component using the <code>{% component %}</code> template tag. Within this tag, you will need to type in the dotted path to the component.</p> <p>Additionally, you can pass in <code>args</code> and <code>kwargs</code> into your component function. After reading the code below, pay attention to how the function definition for <code>hello_world</code> (from the previous step) accepts a <code>recipient</code> argument.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> Components are automatically registered! <p>ReactPy-Django will automatically register any component that is referenced in a Django HTML template. This means you typically do not need to manually register components in your Django app.</p> <p>Please note that this HTML template must be properly stored within a registered Django app. ReactPy-Django will output a console log message containing all detected components when the server starts up.</p> Do not use context variables for the component path <p>The ReactPy component finder requires that your component path is a string.</p> <p>Do not use Django template/context variables for the component path. Failure to follow this warning will result in render failures.</p> <p>For example, do not do the following:</p> my_template.htmlviews.py <pre><code>&lt;!-- This is good --&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n\n&lt;!-- This is bad --&gt;\n{% component my_variable recipient=\"World\" %}\n</code></pre> <pre><code>from django.shortcuts import render\n\n\ndef example_view(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_variable\": \"example_project.my_app.components.hello_world\"},\n    )\n</code></pre> <p>Note: If you decide to not follow this warning, you will need to use the <code>register_component</code> function to manually register your components.</p> Can I use multiple components on one page? <p>You can add as many components to a webpage as needed by using the template tag multiple times. Retrofitting legacy sites to use ReactPy will typically involve many components on one page.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;body&gt;\n        &lt;h1&gt;{% component \"example_project.my_app.components.my_title\" %}&lt;/h1&gt;\n        &lt;p&gt;{% component \"example_project.my_app_2.components.goodbye_world\" class=\"bold small-font\" %}&lt;/p&gt;\n{% component \"example_project.my_app_3.components.my_button\" %}\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Please note that components separated like this will not be able to interact with each other, except through database queries.</p> <p>Additionally, in scenarios where you are trying to create a Single Page Application (SPA) within Django, you will only have one component within your <code>&lt;body&gt;</code> tag.</p> Where is my templates folder? <p>If you do not have a <code>./templates/</code> folder in your Django app, you can simply create one! Keep in mind, templates within this folder will not be detected by Django unless you add the corresponding Django app to <code>settings.py:INSTALLED_APPS</code>.</p>"},{"location":"learn/your-first-component/#setting-up-a-django-view","title":"Setting up a Django view","text":"<p>Within your Django app's <code>views.py</code> file, you will need to create a view function to render the HTML template <code>my_template.html</code> (from the previous step).</p> views.py <pre><code>from django.shortcuts import render\n\n\ndef index(request):\n    return render(request, \"my_template.html\")\n</code></pre> <p>We will add this new view into your <code>urls.py</code> and define what URL it should be accessible at.</p> urls.py <pre><code>from django.urls import path\n\nfrom example import views\n\nurlpatterns = [\n    path(\"example/\", views.index),\n]\n</code></pre> Which urls.py do I add my views to? <p>For simple Django projects, you can easily add all of your views directly into the Django project's <code>urls.py</code>. However, as you start increase your project's complexity you might end up with way too much within one file.</p> <p>Once you reach that point, we recommend creating an individual <code>urls.py</code> within each of your Django apps.</p> <p>Then, within your Django project's <code>urls.py</code> you will use Django's <code>include</code> function to link it all together.</p>"},{"location":"learn/your-first-component/#viewing-your-component","title":"Viewing your component","text":"<p>To test your new Django view, run the following command to start up a development web server.</p> <pre><code>python manage.py runserver\n</code></pre> <p>Now you can navigate to your Django project URL that contains a ReactPy component, such as <code>http://127.0.0.1:8000/example/</code> (from the previous step).</p> <p>If you copy-pasted our example component, you will now see your component display \"Hello World\".</p> Do not use <code>manage.py runserver</code> for production <p>This command is only intended for development purposes. For production deployments make sure to read Django's documentation.</p>"},{"location":"learn/your-first-component/#learn-more","title":"Learn more","text":"<p>Congratulations! If you followed the previous steps, you have now created a \"Hello World\" component using ReactPy-Django!</p> <p>Deep Dive</p> <p>The docs you are reading only covers our Django integration. To learn more, check out one of the following links:</p> <ul> <li>ReactPy-Django Feature Reference</li> <li>ReactPy Core Documentation</li> <li>Ask Questions on Discord</li> </ul> <p>Additionally, the vast majority of tutorials/guides you find for ReactJS can be applied to ReactPy.</p>"},{"location":"reference/components/","title":"Components","text":""},{"location":"reference/components/#overview","title":"Overview","text":"<p>  We supply some pre-designed that components can be used to help simplify development.  </p>"},{"location":"reference/components/#pyscript-component","title":"PyScript Component","text":"<p>This allows you to embedded any number of client-side PyScript components within traditional ReactPy components.</p> <p>By default, the only available dependencies are the Python standard library, <code>pyscript</code>, <code>pyodide</code>, <code>reactpy</code> core.</p> <p>The entire file path provided is loaded directly into the browser, and must have a <code>def root()</code> component to act as the entry point.</p> <p>Pitfall</p> <p>Similar to JavaScript, your provided Python file is loaded directly into the client (web browser) as raw text to run using the PyScript interpreter. Be cautious about what you include in your Python file.</p> <p>As a result being client-sided, Python packages within your local environment (such as those installed via <code>pip install ...</code>)  are not accessible within PyScript components.</p> components.pyroot.pymy_template.html <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        \"This text is from my server-side component\",\n        pyscript_component(\"./example_project/my_app/components/root.py\"),\n    )\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    return html.div(\"This text is from my client-side component\")\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.server_side_component\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*file_paths</code> <code>str</code> File path to your client-side component. If multiple paths are provided, the contents are automatically merged. N/A <code>initial</code> <code>str | VdomDict | ComponentType</code> The initial HTML that is displayed prior to the PyScript component loads. This can either be a string containing raw HTML, a <code>reactpy.html</code> snippet, or a non-interactive component. <code>\"\"</code> <code>root</code> <code>str</code> The name of the root component function. <code>\"root\"</code> You must call <code>pyscript_setup</code> in your Django template before using this tag! <p>This requires using of the <code>{% pyscript_setup %}</code> template tag to initialize PyScript on the client.</p> my_template.html <pre><code>{% load reactpy %}\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n</code></pre> How do I execute JavaScript within PyScript components? <p>PyScript components several options available to execute JavaScript, including...</p> <ul> <li>Pyodide's <code>js</code> module</li> <li>Pyscript's foreign function interface</li> <li>Pyscript's JavaScript modules.</li> </ul> <p>Pyodide JS Module</p> <p>The Pyodide <code>js</code> module has access to everything within the browser's JavaScript environment. Therefore, any global JavaScript functions loaded within your HTML <code>&lt;head&gt;</code> can be called as well. However, you will need to be mindful of JavaScript load order if using <code>async</code> or <code>deferred</code> loading!</p> root.py <pre><code>import js\nfrom reactpy import component, html\n\n\n@component\ndef root():\n    def on_click(event):\n        js.document.title = \"New window title\"\n\n    return html.button({\"onClick\": on_click}, \"Click Me!\")\n</code></pre> <p>PyScript FFI</p> <p>...</p> <p>PyScript JS Modules</p> <p>Assuming you have a local bundle stored within your project's static files, you can import JavaScript modules in a fashion similar to <code>import {moment} from 'static/moment.js'</code>. You will first need to configure your <code>{% pyscript_setup %}</code> block to make the <code>moment.js</code> module available to PyScript. Then, this module can be accessed within <code>pyscript.js_modules.*</code>.</p> root.pymy_template.html <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    from pyscript.js_modules import moment\n\n    return html.div(\n        {\"id\": \"moment\"},\n        \"Using the JavaScript package 'moment' to calculate time: \",\n        moment.default().format(\"YYYY-MM-DD HH:mm:ss\"),\n    )\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js='{\"/static/moment.js\":\"moment\"}' %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> Does my entire component need to be contained in one file? <p>Splitting a large file into multiple files is a common practice in software development.</p> <p>However, PyScript components are run on the client browser. As such, they do not have access to your local development environment, and thus cannot <code>import</code> any local Python files.</p> <p>If your PyScript component file gets too large, you can declare multiple file paths instead. These files will automatically combined by ReactPy.</p> <p>Here is how we recommend splitting your component into multiple files while avoiding local imports but retaining type hints.</p> components.pyroot.pychild.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/root.py\",\n            \"./example_project/my_app/components/child.py\",\n        ),\n    )\n</code></pre> <pre><code>from reactpy import component, html\n\nfrom example.components import child_component\n\n\n@component\ndef root():\n    return html.div(\"This text is from the root component.\", child_component())\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef child_component():\n    return html.div(\"This is a child component from a different file.\")\n</code></pre> How do I display something while the component is loading? <p>You can configure the <code>initial</code> keyword to display HTML while your PyScript component is loading.</p> <p>The value for <code>initial</code> is most commonly be a <code>reactpy.html</code> snippet or a non-interactive <code>@component</code>.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/root.py\",\n            initial=html.div(\"Loading ...\"),\n        ),\n    )\n</code></pre> <p>However, you can also use a string containing raw HTML.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/root.py\",\n            initial=\"&lt;div&gt; Loading ... &lt;/div&gt;\",\n        ),\n    )\n</code></pre> Can I use a different name for my root component? <p>Yes, you can use the <code>root</code> keyword to specify a different name for your root function.</p> components.pymain.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import pyscript_component\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript_component(\n            \"./example_project/my_app/components/main.py\",\n            root=\"main\",\n        ),\n    )\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef main():\n    return html.div(\"Hello, World!\")\n</code></pre>"},{"location":"reference/components/#view-to-component","title":"View To Component","text":"<p>Automatically convert a Django view into a component.</p> <p>At this time, this works best with static views with no interactivity.</p> <p>Compatible with sync or async Function Based Views and Class Based Views.</p> components.pyviews.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_component\n\nhello_world_component = view_to_component(views.hello_world)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>view</code> <code>Callable | View | str</code> The view to convert, or the view's dotted path as a string. N/A <code>transforms</code> <code>Sequence[Callable[[VdomDict], Any]]</code> A list of functions that transforms the newly generated VDOM. The functions will be called on each VDOM node. <code>tuple</code> <code>strict_parsing</code> <code>bool</code> If <code>True</code>, an exception will be generated if the HTML does not perfectly adhere to HTML5. <code>True</code> <p>Returns</p> Type Description <code>constructor</code> A function that takes <code>request, *args, key, **kwargs</code> and returns a ReactPy component. Note that <code>*args</code> and <code>**kwargs</code> are directly provided to your view. Existing limitations <p>There are currently several limitations of using <code>view_to_component</code> that may be resolved in a future version.</p> <ul> <li>Requires manual intervention to change HTTP methods to anything other than <code>GET</code>.</li> <li>ReactPy events cannot conveniently be attached to converted view HTML.</li> <li>Has no option to automatically intercept click events from hyperlinks (such as <code>&lt;a href='example/'&gt;&lt;/a&gt;</code>).</li> </ul> How do I use this for Class Based Views? <p>Class Based Views are accepted by <code>view_to_component</code> as an argument.</p> <p>Calling <code>as_view()</code> is optional, but recommended.</p> components.pyviews.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_component\n\nhello_world_component = view_to_component(views.HelloWorld.as_view())\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\nfrom django.views import View\n\n\nclass HelloWorld(View):\n    def get(self, request):\n        return HttpResponse(\"Hello World!\")\n</code></pre> How do I provide <code>request</code>, <code>args</code>, and <code>kwargs</code> to a converted view? <p>This component accepts <code>request</code>, <code>*args</code>, and <code>**kwargs</code> arguments, which are sent to your provided view.</p> components.pyviews.py <pre><code>from django.http import HttpRequest\nfrom reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_component\n\nhello_world_component = view_to_component(views.hello_world)\n\n\n@component\ndef my_component():\n    request = HttpRequest()\n    request.method = \"GET\"\n\n    return html.div(\n        hello_world_component(\n            request,  # This request object is optional.\n            \"value_1\",\n            \"value_2\",\n            kwarg1=\"abc\",\n            kwarg2=\"123\",\n        ),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request, arg1, arg2, kwarg1=None, kwarg2=None):\n    return HttpResponse(f\"Hello World! {arg1} {arg2} {kwarg1} {kwarg2}\")\n</code></pre> How do I customize this component's behavior? <p>This component accepts arguments that can be used to customize its behavior.</p> <p>Below are all the arguments that can be used.</p> <p><code>strict_parsing</code></p> <p>By default, an exception will be generated if your view's HTML does not perfectly adhere to HTML5.</p> <p>However, there are some circumstances where you may not have control over the original HTML, so you may be unable to fix it. Or you may be relying on non-standard HTML tags such as <code>&lt;my-tag&gt; Hello World &lt;/my-tag&gt;</code>.</p> <p>In these scenarios, you may want to rely on best-fit parsing by setting the <code>strict_parsing</code> parameter to <code>False</code>. This uses <code>libxml2</code> recovery algorithm, which is designed to be similar to how web browsers would attempt to parse non-standard or broken HTML.</p> components.pyviews.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_component\n\nhello_world_component = view_to_component(views.hello_world)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <p><code>transforms</code></p> <p>After your view has been turned into VDOM (python dictionaries), <code>view_to_component</code> will call your <code>transforms</code> functions on every VDOM node.</p> <p>This allows you to modify your view prior to rendering.</p> <p>For example, if you are trying to modify the text of a node with a certain <code>id</code>, you can create a transform like such:</p> components.pyviews.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_component\n\n\ndef example_transform(vdom):\n    attributes = vdom.get(\"attributes\")\n    if attributes and attributes.get(\"id\") == \"hello-world\":\n        vdom[\"children\"][0] = \"Farewell World!\"\n\n\nhello_world_component = view_to_component(views.hello_world, transforms=[example_transform])\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_component(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse('&lt;div id=\"hello-world\"&gt; Hello World! &lt;/div&gt;')\n</code></pre>"},{"location":"reference/components/#view-to-iframe","title":"View To Iframe","text":"<p>Automatically convert a Django view into an <code>iframe</code> element.</p> <p>The contents of this <code>iframe</code> is handled entirely by traditional Django view rendering. While this solution is compatible with more views than <code>view_to_component</code>, it comes with different limitations.</p> <p>Compatible with sync or async Function Based Views and Class Based Views.</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_iframe\n\nhello_world_iframe = view_to_iframe(views.hello_world)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\n\nfrom example import views\nfrom reactpy_django.utils import register_iframe\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>view</code> <code>Callable | View | str</code> The view function or class to convert. N/A <code>extra_props</code> <code>Mapping[str, Any] | None</code> Additional properties to add to the <code>iframe</code> element. <code>None</code> <p>Returns</p> Type Description <code>constructor</code> A function that takes <code>*args, key, **kwargs</code> and returns a ReactPy component. Note that <code>*args</code> and <code>**kwargs</code> are directly provided to your view. Existing limitations <p>There are currently several limitations of using <code>view_to_iframe</code> that may be resolved in a future version.</p> <ul> <li>No built-in method of signalling events back to the parent component.</li> <li>All provided <code>*args</code> and <code>*kwargs</code> must be serializable values, since they are encoded into the URL.</li> <li>The <code>iframe</code> will always load after the parent component.</li> <li>CSS styling for <code>iframe</code> elements tends to be awkward/difficult.</li> </ul> How do I use this for Class Based Views? <p>Class Based Views are accepted by <code>view_to_iframe</code> as an argument.</p> <p>Calling <code>as_view()</code> is optional, but recommended.</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_iframe\n\nhello_world_iframe = view_to_iframe(views.HelloWorld.as_view())\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\nfrom django.views import View\n\n\nclass HelloWorld(View):\n    def get(self, request):\n        return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\n\nfrom example import views\nfrom reactpy_django.utils import register_iframe\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.HelloWorld)\n</code></pre> How do I provide <code>args</code> and <code>kwargs</code> to a converted view? <p>This component accepts <code>*args</code> and <code>**kwargs</code> arguments, which are sent to your provided view.</p> <p>All provided <code>*args</code> and <code>*kwargs</code> must be serializable values, since they are encoded into the URL.</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_iframe\n\nhello_world_iframe = view_to_iframe(\n    views.hello_world,\n)\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(\n            \"value_1\",\n            \"value_2\",\n            kwarg1=\"abc\",\n            kwarg2=\"123\",\n        ),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\n\nfrom example import views\nfrom reactpy_django.utils import register_iframe\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre> How do I customize this component's behavior? <p>This component accepts arguments that can be used to customize its behavior.</p> <p>Below are all the arguments that can be used.</p> <p><code>extra_props</code></p> <p>This component accepts a <code>extra_props</code> parameter, which is a dictionary of additional properties to add to the <code>iframe</code> element.</p> <p>For example, if you want to add a <code>title</code> attribute to the <code>iframe</code> element, you can do so like such:</p> components.pyviews.pyapps.py <pre><code>from reactpy import component, html\n\nfrom example import views\nfrom reactpy_django.components import view_to_iframe\n\nhello_world_iframe = view_to_iframe(views.hello_world, extra_props={\"title\": \"Hello World!\"})\n\n\n@component\ndef my_component():\n    return html.div(\n        hello_world_iframe(),\n    )\n</code></pre> <pre><code>from django.http import HttpResponse\n\n\ndef hello_world(request):\n    return HttpResponse(\"Hello World!\")\n</code></pre> <pre><code>from django.apps import AppConfig\n\nfrom example import views\nfrom reactpy_django.utils import register_iframe\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre>"},{"location":"reference/components/#django-css","title":"Django CSS","text":"<p>Allows you to defer loading a CSS stylesheet until a component begins rendering. This stylesheet must be stored within Django's static files.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import django_css\n\n\n@component\ndef my_component():\n    return html.div(\n        django_css(\"css/buttons.css\"),\n        html.button(\"My Button!\"),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>static_path</code> <code>str</code> The path to the static file. This path is identical to what you would use on Django's <code>{% static %}</code> template tag. N/A <code>key</code> <code>Key | None</code> A key to uniquely identify this component which is unique amongst a component's immediate siblings <code>None</code> <p>Returns</p> Type Description <code>Component</code> A ReactPy component. Can I load static CSS using <code>html.link</code> instead? <p>While you can load stylesheets with <code>html.link</code>, keep in mind that loading this way does not ensure load order. Thus, your stylesheet will be loaded after your component is displayed. This would likely cause unintended visual behavior, so use this at your own discretion.</p> <p>Here's an example on what you should avoid doing for Django static files:</p> <pre><code>from django.templatetags.static import static\nfrom reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.link({\"rel\": \"stylesheet\", \"href\": static(\"css/buttons.css\")}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> How do I load external CSS? <p><code>django_css</code> can only be used with local static files.</p> <p>For external CSS, you should use <code>html.link</code>.</p> <pre><code>from reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.link({\"rel\": \"stylesheet\", \"href\": \"https://example.com/external-styles.css\"}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> Why not load my CSS in <code>&lt;head&gt;</code>? <p>Traditionally, stylesheets are loaded in your <code>&lt;head&gt;</code> using Django's <code>{% static %}</code> template tag.</p> <p>However, to help improve webpage load times you can use this <code>django_css</code> component to defer loading your stylesheet until it is needed.</p>"},{"location":"reference/components/#django-js","title":"Django JS","text":"<p>Allows you to defer loading JavaScript until a component begins rendering. This JavaScript must be stored within Django's static files.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.components import django_js\n\n\n@component\ndef my_component():\n    return html.div(\n        html.button(\"My Button!\"),\n        django_js(\"js/scripts.js\"),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>static_path</code> <code>str</code> The path to the static file. This path is identical to what you would use on Django's <code>{% static %}</code> template tag. N/A <code>key</code> <code>Key | None</code> A key to uniquely identify this component which is unique amongst a component's immediate siblings <code>None</code> <p>Returns</p> Type Description <code>Component</code> A ReactPy component. Can I load static JavaScript using <code>html.script</code> instead? <p>While you can load JavaScript with <code>html.script</code>, keep in mind that loading this way does not ensure load order. Thus, your JavaScript will likely be loaded at an arbitrary time after your component is displayed.</p> <p>Here's an example on what you should avoid doing for Django static files:</p> <pre><code>from django.templatetags.static import static\nfrom reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.script({\"src\": static(\"js/scripts.js\")}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> How do I load external JS? <p><code>django_js</code> can only be used with local static files.</p> <p>For external JavaScript, you should use <code>html.script</code>.</p> <pre><code>from reactpy import component, html\n\n\n@component\ndef my_component():\n    return html.div(\n        html.script({\"src\": \"https://example.com/external-scripts.js\"}),\n        html.button(\"My Button!\"),\n    )\n</code></pre> Why not load my JS in <code>&lt;head&gt;</code>? <p>Traditionally, JavaScript is loaded in your <code>&lt;head&gt;</code> using Django's <code>{% static %}</code> template tag.</p> <p>However, to help improve webpage load times you can use this <code>django_js</code> component to defer loading your JavaScript until it is needed.</p>"},{"location":"reference/decorators/","title":"Decorators","text":""},{"location":"reference/decorators/#overview","title":"Overview","text":"<p>  Decorator functions can be used within your <code>components.py</code> to help simplify development.  </p>"},{"location":"reference/decorators/#user-passes-test","title":"User Passes Test","text":"<p>You can limit component access to users that pass a test function by using this decorator.</p> <p>This only works with ReactPy components, and is inspired by Django's <code>user_passes_test</code> decorator.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.decorators import user_passes_test\n\n\ndef is_authenticated(user):\n    return user.is_authenticated\n\n\n@user_passes_test(is_authenticated)\n@component\ndef my_component():\n    return html.div(\"I am logged in!\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>test_func</code> <code>Callable[[AbstractUser], bool]</code> A function that accepts a <code>User</code> returns a boolean. N/A <code>fallback</code> <code>Any | None</code> The content to be rendered if the test fails. Typically is a ReactPy component or VDOM (<code>reactpy.html</code> snippet). <p>Returns</p> Type Description <code>ComponentConstructor</code> A ReactPy component constructor. How do I render a different component if the test fails? <p>You can use a component with the <code>fallback</code> argument, as seen below.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.decorators import user_passes_test\n\n\n@component\ndef my_component_fallback():\n    return html.div(\"I am NOT logged in!\")\n\n\ndef is_authenticated(user):\n    return user.is_authenticated\n\n\n@user_passes_test(is_authenticated, fallback=my_component_fallback)\n@component\ndef my_component():\n    return html.div(\"I am logged in!\")\n</code></pre> How do I render a simple <code>reactpy.html</code> snippet if the test fails? <p>You can use a <code>reactpy.html</code> snippet with the <code>fallback</code> argument, as seen below.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.decorators import user_passes_test\n\n\ndef is_authenticated(user):\n    return user.is_authenticated\n\n\n@user_passes_test(is_authenticated, fallback=html.div(\"I am NOT logged in!\"))\n@component\ndef my_component():\n    return html.div(\"I am logged in!\")\n</code></pre>"},{"location":"reference/hooks/","title":"Hooks","text":""},{"location":"reference/hooks/#overview","title":"Overview","text":"<p>  Prefabricated hooks can be used within your <code>components.py</code> to help simplify development.  </p> <p>Note</p> <p>Looking for standard React hooks?</p> <p>This package only contains Django specific hooks. Standard hooks can be found within <code>reactive-python/reactpy</code>.</p>"},{"location":"reference/hooks/#database-hooks","title":"Database Hooks","text":""},{"location":"reference/hooks/#use-query","title":"Use Query","text":"<p>Execute functions in the background and return the result, typically to read data from the Django ORM.</p> <p>The default postprocessor expects your query function to <code>return</code> a Django <code>Model</code> or <code>QuerySet</code>. This needs to be changed or disabled to execute other types of queries.</p> <p>Query functions can be sync or async.</p> components.pymodels.py <pre><code>from channels.db import database_sync_to_async\nfrom reactpy import component, html\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_query\n\n\nasync def get_items():\n    return await database_sync_to_async(TodoItem.objects.all)()\n\n\n@component\ndef todo_list():\n    item_query = use_query(get_items)\n\n    if item_query.loading:\n        rendered_items = html.h2(\"Loading...\")\n    elif item_query.error or not item_query.data:\n        rendered_items = html.h2(\"Error when loading!\")\n    else:\n        rendered_items = html.ul([html.li(item.text, key=item.pk) for item in item_query.data])\n\n    return html.div(\"Rendered items: \", rendered_items)\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>query</code> <code>Callable[FuncParams, Awaitable[Inferred]] | Callable[FuncParams, Inferred]</code> A function that executes a query and returns some data. N/A <code>kwargs</code> <code>dict[str, Any] | None</code> Keyword arguments to passed into the <code>query</code> function. <code>None</code> <code>thread_sensitive</code> <code>bool</code> Whether to run your query function in thread sensitive mode. This mode only applies to sync query functions, and is turned on by default due to Django ORM limitations. <code>True</code> <code>postprocessor</code> <code>AsyncPostprocessor | SyncPostprocessor | None</code> A callable that processes the query <code>data</code> before it is returned. The first argument of postprocessor function must be the query <code>data</code>. All proceeding arguments are optional <code>postprocessor_kwargs</code>. This postprocessor function must return the modified <code>data</code>. <code>None</code> <code>postprocessor_kwargs</code> <code>dict[str, Any] | None</code> Keyworded arguments passed into the <code>postprocessor</code> function. <code>None</code> <p>Returns</p> Type Description <code>Query[Inferred]</code> An object containing <code>loading</code>/<code>error</code> states, your <code>data</code> (if the query has successfully executed), and a <code>refetch</code> callable that can be used to re-run the query. How can I provide arguments to my query function? <p><code>kwargs</code> can be provided to your query function via the <code>kwargs=...</code> parameter.</p> components.py <pre><code>from reactpy import component\n\nfrom reactpy_django.hooks import use_query\n\n\ndef example_query(value: int, other_value: bool = False): ...\n\n\n@component\ndef my_component():\n    query = use_query(example_query, {\"value\": 123, \"other_value\": True})\n\n    return str(query.data)\n</code></pre> How can I customize this hook's behavior? <p>This hook has several parameters that can be used to customize behavior.</p> <p>Below are examples of values that can be modified.</p> <p><code>thread_sensitive</code></p> <p>Whether to run your synchronous query function in thread sensitive mode. Thread sensitive mode is turned on by default due to Django ORM limitations. See Django's <code>sync_to_async</code> docs docs for more information.</p> <p>This setting only applies to sync query functions, and will be ignored for async functions.</p> components.py <pre><code>from reactpy import component\n\nfrom reactpy_django.hooks import use_query\n\n\ndef execute_thread_safe_operation():\n\"\"\"This is an example query function that does some thread-safe operation.\"\"\"\n\n\n@component\ndef my_component():\n    query = use_query(execute_thread_safe_operation, thread_sensitive=False)\n\n    if query.loading or query.error:\n        return None\n\n    return str(query.data)\n</code></pre> <p><code>postprocessor</code></p> <p>By default, automatic recursive fetching of <code>ManyToMany</code> or <code>ForeignKey</code> fields is enabled within the <code>django_query_postprocessor</code>. This is needed to prevent <code>SynchronousOnlyOperation</code> exceptions when accessing these fields within your ReactPy components.</p> <p>However, if you...</p> <ol> <li>Want to use this hook to defer IO intensive tasks to be computed in the background</li> <li>Want to to utilize <code>use_query</code> with a different ORM</li> </ol> <p>... then you can either set a custom <code>postprocessor</code>, or disable all postprocessing behavior by modifying the <code>postprocessor=...</code> parameter. In the example below, we will set the <code>postprocessor</code> to <code>None</code> to disable postprocessing behavior.</p> components.py <pre><code>from reactpy import component\n\nfrom reactpy_django.hooks import use_query\n\n\ndef execute_io_intensive_operation():\n\"\"\"This is an example query function that does something IO intensive.\"\"\"\n\n\n@component\ndef my_component():\n    query = use_query(\n        execute_io_intensive_operation,\n        postprocessor=None,\n    )\n\n    if query.loading or query.error:\n        return None\n\n    return str(query.data)\n</code></pre> <p>If you wish to create a custom <code>postprocessor</code>, you will need to create a function where the first must be the query <code>data</code>. All proceeding arguments are optional <code>postprocessor_kwargs</code> (see below). This <code>postprocessor</code> function must return the modified <code>data</code>.</p> components.py <pre><code>from reactpy import component\n\nfrom reactpy_django.hooks import use_query\n\n\ndef my_postprocessor(data, example_kwarg=True):\n    if example_kwarg:\n        return data\n\n    return dict(data)\n\n\ndef execute_io_intensive_operation():\n\"\"\"This is an example query function that does something IO intensive.\"\"\"\n\n\n@component\ndef my_component():\n    query = use_query(\n        execute_io_intensive_operation,\n        postprocessor=my_postprocessor,\n        postprocessor_kwargs={\"example_kwarg\": False},\n    )\n\n    if query.loading or query.error:\n        return None\n\n    return str(query.data)\n</code></pre> <p><code>postprocessor_kwargs</code></p> <p>By default, automatic recursive fetching of <code>ManyToMany</code> or <code>ForeignKey</code> fields is enabled within the <code>django_query_postprocessor</code>. This is needed to prevent <code>SynchronousOnlyOperation</code> exceptions when accessing these fields within your ReactPy components.</p> <p>However, if you have deep nested trees of relational data, this may not be a desirable behavior. In these scenarios, you may prefer to manually fetch these relational fields using a second <code>use_query</code> hook.</p> <p>You can disable the prefetching behavior of the default <code>postprocessor</code> (located at <code>reactpy_django.utils.django_query_postprocessor</code>) via the <code>postprocessor_kwargs=...</code> parameter.</p> components.py <pre><code>from reactpy import component\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_query\n\n\ndef get_model_with_relationships():\n\"\"\"This is an example query function that gets `MyModel` which has a ManyToMany field, and\n    additionally other models that have formed a ForeignKey association to `MyModel`.\n\n    ManyToMany Field: `many_to_many_field`\n    ForeignKey Field: `foreign_key_field_set`\n    \"\"\"\n    return TodoItem.objects.get(id=1)\n\n\n@component\ndef my_component():\n    query = use_query(\n        get_model_with_relationships,\n        postprocessor_kwargs={\"many_to_many\": False, \"many_to_one\": False},\n    )\n\n    if query.loading or query.error or not query.data:\n        return None\n\n    # By disabling `many_to_many` and `many_to_one`, accessing these fields will now\n    # generate a `SynchronousOnlyOperation` exception\n    return f\"{query.data.many_to_many_field} {query.data.foriegn_key_field_set}\"\n</code></pre> <p>Note: In Django's ORM design, the field name to access foreign keys is postfixed with <code>_set</code> by default.</p> Can I make ORM calls without hooks? <p>Due to Django's ORM design, database queries must be deferred using hooks. Otherwise, you will see a <code>SynchronousOnlyOperation</code> exception.</p> <p>These <code>SynchronousOnlyOperation</code> exceptions may be removed in a future version of Django. However, it is best practice to always perform IO operations (such as ORM queries) via hooks to prevent performance issues.</p> Can I make a failed query try again? <p>Yes, <code>use_mutation</code> can be re-executed by calling <code>reset()</code> on your <code>use_mutation</code> instance.</p> <p>For example, take a look at <code>reset_event</code> below.</p> components.pymodels.py <pre><code>from reactpy import component, html\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_mutation\n\n\ndef add_item(text: str):\n    TodoItem(text=text).save()\n\n\n@component\ndef todo_list():\n    item_mutation = use_mutation(add_item)\n\n    def reset_event(event):\n        item_mutation.reset()\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.button({\"on_click\": reset_event}, \"Error: Try again!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> Why does the example query function return <code>TodoItem.objects.all()</code>? <p>This design decision was based on Apollo's <code>useQuery</code> hook, but ultimately helps avoid Django's <code>SynchronousOnlyOperation</code> exceptions.</p> <p>With the <code>Model</code> or <code>QuerySet</code> your function returns, this hook uses the default postprocessor to ensure that all deferred or lazy fields are executed.</p>"},{"location":"reference/hooks/#use-mutation","title":"Use Mutation","text":"<p>Modify data in the background, typically to create/update/delete data from the Django ORM.</p> <p>Mutation functions can <code>return False</code> to manually prevent your <code>refetch=...</code> function from executing. All other returns are ignored.</p> <p>Mutation functions can be sync or async.</p> components.pymodels.py <pre><code>from reactpy import component, html\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_mutation\n\n\nasync def add_item(text: str):\n    await TodoItem(text=text).asave()\n\n\n@component\ndef todo_list():\n    item_mutation = use_mutation(add_item)\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.h2(\"Error when adding!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>mutation</code> <code>Callable[FuncParams, bool | None] | Callable[FuncParams, Awaitable[bool | None]]</code> A callable that performs Django ORM create, update, or delete functionality. If this function returns <code>False</code>, then your <code>refetch</code> function will not be used. N/A <code>thread_sensitive</code> <code>bool</code> Whether to run the mutation in thread sensitive mode. This mode only applies to sync mutation functions, and is turned on by default due to Django ORM limitations. <code>True</code> <code>refetch</code> <code>Callable[..., Any] | Sequence[Callable[..., Any]] | None</code> A query function (the function you provide to your <code>use_query</code> hook) or a sequence of query functions that need a <code>refetch</code> if the mutation succeeds. This is useful for refreshing data after a mutation has been performed. <code>None</code> <p>Returns</p> Type Description <code>Mutation[FuncParams]</code> An object containing <code>loading</code>/<code>error</code> states, and a <code>reset</code> callable that will set <code>loading</code>/<code>error</code> states to defaults. This object can be called to run the query. How can I provide arguments to my mutation function? <p><code>*args</code> and <code>**kwargs</code> can be provided to your mutation function via <code>mutation(...)</code> parameters.</p> components.py <pre><code>from reactpy import component\n\nfrom reactpy_django.hooks import use_mutation\n\n\ndef example_mutation(value: int, other_value: bool = False): ...\n\n\n@component\ndef my_component():\n    mutation = use_mutation(example_mutation)\n\n    mutation(123, other_value=True)\n</code></pre> How can I customize this hook's behavior? <p>This hook has several parameters that can be used to customize behavior.</p> <p>Below are examples of values that can be modified.</p> <p><code>thread_sensitive</code></p> <p>Whether to run your synchronous mutation function in thread sensitive mode. Thread sensitive mode is turned on by default due to Django ORM limitations. See Django's <code>sync_to_async</code> docs docs for more information.</p> <p>This setting only applies to sync query functions, and will be ignored for async functions.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_mutation\n\n\ndef execute_thread_safe_mutation(text):\n\"\"\"This is an example mutation function that does some thread-safe operation.\"\"\"\n\n\n@component\ndef my_component():\n    item_mutation = use_mutation(\n        execute_thread_safe_mutation,\n        thread_sensitive=False,\n    )\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading or item_mutation.error:\n        mutation_status = html.h2(\"Doing something...\")\n    elif item_mutation.error:\n        mutation_status = html.h2(\"Error!\")\n    else:\n        mutation_status = html.h2(\"Done.\")\n\n    return html.div(\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> Can I make ORM calls without hooks? <p>Due to Django's ORM design, database queries must be deferred using hooks. Otherwise, you will see a <code>SynchronousOnlyOperation</code> exception.</p> <p>These <code>SynchronousOnlyOperation</code> exceptions may be removed in a future version of Django. However, it is best practice to always perform IO operations (such as ORM queries) via hooks to prevent performance issues.</p> Can I make a failed mutation try again? <p>Yes, <code>use_mutation</code> can be re-executed by calling <code>reset()</code> on your <code>use_mutation</code> instance.</p> <p>For example, take a look at <code>reset_event</code> below.</p> components.pymodels.py <pre><code>from reactpy import component, html\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_mutation\n\n\ndef add_item(text: str):\n    TodoItem(text=text).save()\n\n\n@component\ndef todo_list():\n    item_mutation = use_mutation(add_item)\n\n    def reset_event(event):\n        item_mutation.reset()\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.button({\"on_click\": reset_event}, \"Error: Try again!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> Can <code>use_mutation</code> trigger a refetch of <code>use_query</code>? <p>Yes, <code>use_mutation</code> can queue a refetch of a <code>use_query</code> via the <code>refetch=...</code> argument.</p> <p>The example below is a merge of the <code>use_query</code> and <code>use_mutation</code> examples above with the addition of a <code>use_mutation(refetch=...)</code> argument.</p> <p>Please note that <code>refetch</code> will cause all <code>use_query</code> hooks that use <code>get_items</code> in the current component tree will be refetched.</p> components.pymodels.py <pre><code>from reactpy import component, html\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_mutation, use_query\n\n\ndef get_items():\n    return TodoItem.objects.all()\n\n\ndef add_item(text: str):\n    TodoItem(text=text).save()\n\n\n@component\ndef todo_list():\n    item_query = use_query(get_items)\n    item_mutation = use_mutation(add_item, refetch=get_items)\n\n    def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            item_mutation(text=event[\"target\"][\"value\"])\n\n    # Handle all possible query states\n    if item_query.loading:\n        rendered_items = html.h2(\"Loading...\")\n    elif item_query.error or not item_query.data:\n        rendered_items = html.h2(\"Error when loading!\")\n    else:\n        rendered_items = html.ul(html.li(item.text, key=item.pk) for item in item_query.data)\n\n    # Handle all possible mutation states\n    if item_mutation.loading:\n        mutation_status = html.h2(\"Adding...\")\n    elif item_mutation.error:\n        mutation_status = html.h2(\"Error when adding!\")\n    else:\n        mutation_status = html.h2(\"Mutation done.\")\n\n    return html.div(\n        html.label(\"Add an item:\"),\n        html.input({\"type\": \"text\", \"on_key_down\": submit_event}),\n        mutation_status,\n        rendered_items,\n    )\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre>"},{"location":"reference/hooks/#use-user-data","title":"Use User Data","text":"<p>Store or retrieve a <code>dict</code> containing user data specific to the connection's <code>User</code>.</p> <p>This hook is useful for storing user-specific data, such as preferences, settings, or any generic key-value pairs.</p> <p>User data saved with this hook is stored within the <code>REACTPY_DATABASE</code>.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_user_data\n\n\n@component\ndef my_component():\n    query, mutation = use_user_data()\n\n    def on_submit(event):\n        if event[\"key\"] == \"Enter\" and query.data:\n            new_key = str(len(query.data))\n            mutation({**query.data, new_key: event[\"target\"][\"value\"]})\n\n    return html.div(\n        html.div(f\"Data: {query.data}\"),\n        html.div(f\"Loading: {query.loading | mutation.loading}\"),\n        html.div(f\"Error(s): {query.error} {mutation.error}\"),\n        html.input({\"on_key_press\": on_submit}),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>default_data</code> <code>None | dict[str, Callable[[], Any] | Callable[[], Awaitable[Any]] | Any]</code> A dictionary containing <code>{key: default_value}</code> pairs. For computationally intensive defaults, your <code>default_value</code> can be sync or async functions that return the value to set. <code>None</code> <code>save_default_data</code> <code>bool</code> If <code>True</code>, <code>default_data</code> values will automatically be stored within the database if they do not exist. <code>False</code> <p>Returns</p> Type Description <code>UserData</code> A <code>NamedTuple</code> containing a <code>Query</code> and <code>Mutation</code> objects used to access/modify user data. Read the <code>use_query</code> and <code>use_mutation</code> docs for more details. How do I set default values? <p>You can configure default user data via the <code>default_data</code> parameter.</p> <p>This parameter accepts a dictionary containing a <code>{key: default_value}</code> pairs. For computationally intensive defaults, your <code>default_value</code> can be sync or async functions that return the value to set.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_user_data\n\n\n@component\ndef my_component():\n    user_data = use_user_data(\n        default_data={\n            \"basic_example\": \"123\",\n            \"computed_example_sync\": sync_default,\n            \"computed_example_async\": async_default,\n        }\n    )\n\n    return html.div(\n        html.div(f\"Data: {user_data.query.data}\"),\n    )\n\n\ndef sync_default():\n    return ...\n\n\nasync def async_default():\n    return ...\n</code></pre>"},{"location":"reference/hooks/#communication-hooks","title":"Communication Hooks","text":""},{"location":"reference/hooks/#use-channel-layer","title":"Use Channel Layer","text":"<p>Subscribe to a Django Channels layer to send/receive messages.</p> <p>Layers are a multiprocessing-safe communication system that allows you to send/receive messages between different parts of your application.</p> <p>This is often used to create chat systems, synchronize data between components, or signal re-renders from outside your components.</p> components.py <pre><code>from reactpy import component, hooks, html\n\nfrom reactpy_django.hooks import use_channel_layer\n\n\n@component\ndef my_component():\n    async def receive_message(message):\n        set_message(message[\"text\"])\n\n    async def send_message(event):\n        if event[\"key\"] == \"Enter\":\n            await sender({\"text\": event[\"target\"][\"value\"]})\n\n    message, set_message = hooks.use_state(\"\")\n    sender = use_channel_layer(\"my-channel-name\", receiver=receive_message)\n\n    return html.div(\n        f\"Received: {message}\",\n        html.br(),\n        \"Send: \",\n        html.input({\"type\": \"text\", \"onKeyDown\": send_message}),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>name</code> <code>str | None</code> The name of the channel to subscribe to. If you define a <code>group_name</code>, you can keep <code>name</code> undefined to auto-generate a unique name. <code>None</code> <code>group_name</code> <code>str | None</code> If configured, any messages sent within this hook will be broadcasted to all channels in this group. <code>None</code> <code>group_add</code> <code>bool</code> If <code>True</code>, the channel will automatically be added to the group when the component mounts. <code>True</code> <code>group_discard</code> <code>bool</code> If <code>True</code>, the channel will automatically be removed from the group when the component dismounts. <code>True</code> <code>receiver</code> <code>AsyncMessageReceiver | None</code> An async function that receives a <code>message: dict</code> from a channel. If more than one receiver waits on the same channel name, a random receiver will get the result. <code>None</code> <code>layer</code> <code>str</code> The channel layer to use. This layer must be defined in <code>settings.py:CHANNEL_LAYERS</code>. <code>'default'</code> <p>Returns</p> Type Description <code>AsyncMessageSender</code> An async callable that can send a <code>message: dict</code>. Extra Django configuration required <p>In order to use this hook, you will need to configure Django to enable channel layers.</p> <p>The Django Channels documentation has information on what steps you need to take.</p> <p>In summary, you will need to:</p> <ol> <li> <p>Install <code>redis</code> on your machine.</p> </li> <li> <p>Run the following command to install <code>channels-redis</code> in your Python environment.</p> <pre><code>pip install channels-redis\n</code></pre> </li> <li> <p>Configure your <code>settings.py</code> to use <code>RedisChannelLayer</code> as your layer backend.</p> <pre><code>CHANNEL_LAYERS = {\n    \"default\": {\n        \"BACKEND\": \"channels_redis.core.RedisChannelLayer\",\n        \"CONFIG\": {\n            \"hosts\": [(\"127.0.0.1\", 6379)],\n        },\n    },\n}\n</code></pre> </li> </ol> How do I broadcast a message to multiple components? <p>If more than one receiver waits on the same channel, a random one will get the result.</p> <p>To get around this, you can define a <code>group_name</code> to broadcast messages to all channels within a specific group. If you do not define a channel <code>name</code> while using groups, ReactPy will automatically generate a unique channel name for you.</p> <p>In the example below, all messages sent by the <code>sender</code> component will be received by all <code>receiver</code> components that exist (across every active client browser).</p> components.py <pre><code>from reactpy import component, hooks, html\n\nfrom reactpy_django.hooks import use_channel_layer\n\n\n@component\ndef my_sender_component():\n    sender = use_channel_layer(group_name=\"my-group-name\")\n\n    async def submit_event(event):\n        if event[\"key\"] == \"Enter\":\n            await sender({\"text\": event[\"target\"][\"value\"]})\n\n    return html.div(\n        \"Message Sender: \",\n        html.input({\"type\": \"text\", \"onKeyDown\": submit_event}),\n    )\n\n\n@component\ndef my_receiver_component_1():\n    message, set_message = hooks.use_state(\"\")\n\n    async def receive_event(message):\n        set_message(message[\"text\"])\n\n    use_channel_layer(group_name=\"my-group-name\", receiver=receive_event)\n\n    return html.div(f\"Message Receiver 1: {message}\")\n\n\n@component\ndef my_receiver_component_2():\n    message, set_message = hooks.use_state(\"\")\n\n    async def receive_event(message):\n        set_message(message[\"text\"])\n\n    use_channel_layer(group_name=\"my-group-name\", receiver=receive_event)\n\n    return html.div(f\"Message Receiver 2: {message}\")\n</code></pre> How do I signal a re-render from something that isn't a component? <p>There are occasions where you may want to signal a re-render from something that isn't a component, such as a Django model signal.</p> <p>In these cases, you can use the <code>use_channel_layer</code> hook to receive a signal within your component, and then use the <code>get_channel_layer().send(...)</code> to send the signal.</p> <p>In the example below, the sender will signal every time <code>ExampleModel</code> is saved. Then, when the receiver gets this signal, it explicitly calls <code>set_message(...)</code> to trigger a re-render.</p> signals.pycomponents.py <pre><code>from asgiref.sync import async_to_sync\nfrom channels.layers import get_channel_layer\nfrom django.db.models import Model\nfrom django.db.models.signals import pre_save\nfrom django.dispatch import receiver\n\n\nclass ExampleModel(Model): ...\n\n\n@receiver(pre_save, sender=ExampleModel)\ndef my_sender_signal(sender, instance, **kwargs):\n    layer = get_channel_layer()\n\n    # Example of sending a message to a channel\n    async_to_sync(layer.send)(\"my-channel-name\", {\"text\": \"Hello World!\"})\n\n    # Example of sending a message to a group channel\n    async_to_sync(layer.group_send)(\"my-group-name\", {\"text\": \"Hello World!\"})\n</code></pre> <pre><code>from reactpy import component, hooks, html\n\nfrom reactpy_django.hooks import use_channel_layer\n\n\n@component\ndef my_receiver_component():\n    message, set_message = hooks.use_state(\"\")\n\n    async def receive_event(message):\n        set_message(message[\"text\"])\n\n    use_channel_layer(\"my-channel-name\", receiver=receive_event)\n\n    return html.div(f\"Message Receiver: {message}\")\n</code></pre>"},{"location":"reference/hooks/#connection-hooks","title":"Connection Hooks","text":""},{"location":"reference/hooks/#use-connection","title":"Use Connection","text":"<p>Returns the active connection, which is either a Django WebSocket or a HTTP Request.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_connection\n\n\n@component\ndef my_component():\n    connection = use_connection()\n\n    return html.div(str(connection))\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>Connection</code> An object that contains a <code>carrier</code> (<code>WebSocket</code> or <code>HttpRequest</code>), <code>scope</code>, and <code>location</code>."},{"location":"reference/hooks/#use-scope","title":"Use Scope","text":"<p>Shortcut that returns the WebSocket or HTTP connection's scope.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_scope\n\n\n@component\ndef my_component():\n    scope = use_scope()\n\n    return html.div(str(scope))\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>MutableMapping[str, Any]</code> The connection's <code>scope</code>."},{"location":"reference/hooks/#use-location","title":"Use Location","text":"<p>Shortcut that returns the browser's current <code>Location</code>.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_location\n\n\n@component\ndef my_component():\n    location = use_location()\n\n    return html.div(location.pathname + location.search)\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>Location</code> An object containing the current URL's <code>pathname</code> and <code>search</code> query."},{"location":"reference/hooks/#use-origin","title":"Use Origin","text":"<p>Shortcut that returns the WebSocket or HTTP connection's <code>origin</code>.</p> <p>You can expect this hook to provide strings such as <code>http://example.com</code>.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_origin\n\n\n@component\ndef my_component():\n    origin = use_origin()\n\n    return html.div(origin or \"No origin\")\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>str | None</code> A string containing the browser's current origin, obtained from WebSocket or HTTP headers (if available)."},{"location":"reference/hooks/#use-root-id","title":"Use Root ID","text":"<p>Shortcut that returns the root component's <code>id</code> from the WebSocket or HTTP connection.</p> <p>The root ID is a randomly generated <code>uuid4</code>. It is notable to mention that it is persistent across the current connection. The <code>uuid</code> is reset when the page is refreshed.</p> <p>This is useful when used in combination with <code>use_channel_layer</code> to send messages to a specific component instance, and/or retain a backlog of messages in case that component is disconnected via <code>use_channel_layer( ... , group_discard=False)</code>.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_root_id\n\n\n@component\ndef my_component():\n    root_id = use_root_id()\n\n    return html.div(f\"Root ID: {root_id}\")\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>str</code> A string containing the root component's <code>id</code>."},{"location":"reference/hooks/#use-user","title":"Use User","text":"<p>Shortcut that returns the WebSocket or HTTP connection's <code>User</code>.</p> components.py <pre><code>from reactpy import component, html\n\nfrom reactpy_django.hooks import use_user\n\n\n@component\ndef my_component():\n    user = use_user()\n\n    return html.div(user.username)\n</code></pre> See Interface <p>Parameters</p> <p><code>None</code></p> <p>Returns</p> Type Description <code>AbstractUser</code> A Django <code>User</code>, which can also be an <code>AnonymousUser</code>."},{"location":"reference/html/","title":"HTML","text":""},{"location":"reference/html/#overview","title":"Overview","text":"<p>  We supply some HTML elements can be used to help simplify development.  </p>"},{"location":"reference/html/#pyscript","title":"PyScript","text":"<p>PyScript code block. The text content of this tag are executed within the PyScript interpreter. This can be used as an alternative to the <code>reactpy.html.script</code>.</p> <p>This is a primitive HTML tag that is leveraged by <code>reactpy_django.components.pyscript_component</code>.</p> <p>The <code>pyscript</code> tag functions identically to HTML tags contained within <code>reactpy.html</code>.</p> components.pymy_template.html <pre><code>from reactpy import component, html\n\nfrom reactpy_django.html import pyscript\n\nexample_source_code = \"\"\"\nimport js\n\njs.console.log(\"Hello, World!\")\n\"\"\"\n\n\n@component\ndef server_side_component():\n    return html.div(\n        pyscript(example_source_code.strip()),\n    )\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.server_side_component.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> You must call <code>pyscript_setup</code> in your Django template before using this tag! <p>This requires using of the <code>{% pyscript_setup %}</code> template tag to initialize PyScript on the client.</p> my_template.html <pre><code>{% load reactpy %}\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n</code></pre>"},{"location":"reference/management-commands/","title":"Management Commands","text":""},{"location":"reference/management-commands/#overview","title":"Overview","text":"<p>  ReactPy exposes Django management commands that can be used to perform various ReactPy-related tasks.  </p>"},{"location":"reference/management-commands/#clean-reactpy-command","title":"Clean ReactPy Command","text":"<p>Command used to manually clean expired ReactPy data from the database and/or cache.</p> <p>When using this command without arguments, it will perform all cleaning operations. You can limit cleaning to specific operations through arguments such as <code>--sessions</code>.</p> <p>Terminal</p> <pre><code>python manage.py clean_reactpy\n</code></pre> See Interface <p>Type <code>python manage.py clean_reactpy --help</code> to see the available options.</p>"},{"location":"reference/router/","title":"URL Router","text":""},{"location":"reference/router/#overview","title":"Overview","text":"<p>  A Single Page Application URL router, which is a variant of <code>reactpy-router</code> that uses Django conventions.  </p> <p>Note</p> <p>Looking for more details on URL routing?</p> <p>This package only contains Django specific URL routing features. Standard features can be found within <code>reactive-python/reactpy-router</code>.</p>"},{"location":"reference/router/#django-router","title":"Django Router","text":"<p>URL router that enables the ability to conditionally render other components based on the client's current URL <code>path</code>.</p> <p>Pitfall</p> <p>All pages where <code>django_router</code> is used must have identical, or more permissive URL exposure within Django's URL patterns. You can think of the router component as a secondary, client-side router. Django will always handle the initial load of the webpage.</p> <p>You can duplicate all your URL patterns within both Django and ReactPy, but it's easiest to use a wildcard <code>.*</code> within Django's <code>urlpatterns</code> and let ReactPy handle the rest. For example...</p> <pre><code>urlpatterns = [\n    re_path(r\"^.*$\", my_reactpy_router_view),\n]\n</code></pre> components.py <pre><code>from reactpy import component, html\nfrom reactpy_router import route\n\nfrom reactpy_django.router import django_router\n\n\n@component\ndef my_component():\n    return django_router(\n        route(\"/router/\", html.div(\"Example 1\")),\n        route(\"/router/any/&lt;value&gt;/\", html.div(\"Example 2\")),\n        route(\"/router/integer/&lt;int:value&gt;/\", html.div(\"Example 3\")),\n        route(\"/router/path/&lt;path:value&gt;/\", html.div(\"Example 4\")),\n        route(\"/router/slug/&lt;slug:value&gt;/\", html.div(\"Example 5\")),\n        route(\"/router/string/&lt;str:value&gt;/\", html.div(\"Example 6\")),\n        route(\"/router/uuid/&lt;uuid:value&gt;/\", html.div(\"Example 7\")),\n        route(\"/router/two_values/&lt;int:value&gt;/&lt;str:value2&gt;/\", html.div(\"Example 8\")),\n        route(\"/router/*\", html.div(\"Fallback\")),\n    )\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*routes</code> <code>Route</code> An object from <code>reactpy-router</code> containing a <code>path</code>, <code>element</code>, and child <code>*routes</code>. N/A <p>Returns</p> Type Description <code>VdomDict | None</code> The matched component/path after it has been fully rendered. How is this different from <code>reactpy_router.browser_router</code>? <p>The <code>django_router</code> component utilizes the same internals as <code>browser_router</code>, but provides a more Django-like URL routing syntax.</p>"},{"location":"reference/settings/","title":"Settings","text":""},{"location":"reference/settings/#overview","title":"Overview","text":"<p>  These are ReactPy-Django's default settings values. You can modify these values in your Django project's <code>settings.py</code> to change the behavior of ReactPy.  </p> <p>Note</p> <p>The default configuration of ReactPy is suitable for the vast majority of use cases.</p> <p>You should only consider changing settings when the necessity arises.</p>"},{"location":"reference/settings/#general-settings","title":"General Settings","text":""},{"location":"reference/settings/#reactpy_url_prefix","title":"<code>REACTPY_URL_PREFIX</code>","text":"<p>Default: <code>\"reactpy/\"</code></p> <p>Example Value(s): <code>\"rp/\"</code>, <code>\"render/reactpy/\"</code></p> <p>The prefix used for all ReactPy WebSocket and HTTP URLs.</p>"},{"location":"reference/settings/#reactpy_default_query_postprocessor","title":"<code>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</code>","text":"<p>Default: <code>\"reactpy_django.utils.django_query_postprocessor\"</code></p> <p>Example Value(s): <code>\"example_project.postprocessor\"</code>, <code>None</code></p> <p>Dotted path to the default <code>reactpy_django.hooks.use_query</code> postprocessor function.</p> <p>Postprocessor functions can be async or sync. Here is an example of a sync postprocessor function:</p> <pre><code>def postprocessor(data):\n    del data[\"foo\"]\n    return data\n</code></pre> <p>Set <code>REACTPY_DEFAULT_QUERY_POSTPROCESSOR</code> to <code>None</code> to disable the default postprocessor.</p>"},{"location":"reference/settings/#reactpy_auth_backend","title":"<code>REACTPY_AUTH_BACKEND</code>","text":"<p>Default: <code>\"django.contrib.auth.backends.ModelBackend\"</code></p> <p>Example Value(s): <code>\"example_project.auth.MyModelBackend\"</code></p> <p>Dotted path to the Django authentication backend to use for ReactPy components. This is only needed if:</p> <ol> <li>You are using <code>settings.py:REACTPY_AUTO_RELOGIN=True</code> and...</li> <li>You are using <code>AuthMiddlewareStack</code> and...</li> <li>You are using Django's <code>AUTHENTICATION_BACKENDS</code> setting and...</li> <li>Your Django user model does not define a <code>backend</code> attribute.</li> </ol>"},{"location":"reference/settings/#reactpy_auto_relogin","title":"<code>REACTPY_AUTO_RELOGIN</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Enabling this will cause component WebSocket connections to automatically re-login users that are already authenticated.</p> <p>This is useful to continuously update <code>last_login</code> timestamps and refresh the Django login session.</p>"},{"location":"reference/settings/#performance-settings","title":"Performance Settings","text":""},{"location":"reference/settings/#reactpy_database","title":"<code>REACTPY_DATABASE</code>","text":"<p>Default: <code>\"default\"</code></p> <p>Example Value(s): <code>\"my-reactpy-database\"</code></p> <p>Multiprocessing-safe database used by ReactPy for database-backed hooks and features.</p> <p>If configuring this value, it is mandatory to configure Django to use the ReactPy database router:</p> settings.py <pre><code>DATABASE_ROUTERS = [\"reactpy_django.database.Router\", ...]\n</code></pre>"},{"location":"reference/settings/#reactpy_cache","title":"<code>REACTPY_CACHE</code>","text":"<p>Default: <code>\"default\"</code></p> <p>Example Value(s): <code>\"my-reactpy-cache\"</code></p> <p>Cache used by ReactPy, typically for caching disk operations.</p> <p>We recommend using <code>redis</code>, <code>memcache</code>, or <code>local-memory caching</code>.</p>"},{"location":"reference/settings/#reactpy_backhaul_thread","title":"<code>REACTPY_BACKHAUL_THREAD</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Configures whether ReactPy components are rendered in a dedicated thread.</p> <p>This allows the web server to process other traffic during ReactPy rendering. Vastly improves throughput with web servers such as <code>hypercorn</code> and <code>uvicorn</code>.</p> <p>This setting is incompatible with <code>daphne</code>.</p>"},{"location":"reference/settings/#reactpy_async_rendering","title":"<code>REACTPY_ASYNC_RENDERING</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Configures whether to use an async ReactPy rendering queue. When enabled, large renders will no longer block smaller renders from taking place. Additionally, prevents the rendering queue from being blocked on waiting for async effects to startup/shutdown (which is typically a relatively slow operation).</p> <p>This setting is currently experimental, and currently no effort is made to de-duplicate renders. For example, if parent and child components are scheduled to render at the same time, both renders will take place even though a single render of the parent component would have been sufficient.</p>"},{"location":"reference/settings/#reactpy_default_hosts","title":"<code>REACTPY_DEFAULT_HOSTS</code>","text":"<p>Default: <code>None</code></p> <p>Example Value(s): <code>[\"localhost:8000\", \"localhost:8001\", \"localhost:8002/subdir\"]</code></p> <p>The default host(s) that can render your ReactPy components.</p> <p>ReactPy will use these hosts in a round-robin fashion, allowing for easy distributed computing. This is typically useful for self-hosted applications.</p> <p>You can use the <code>host</code> argument in your template tag to manually override this default.</p>"},{"location":"reference/settings/#reactpy_prerender","title":"<code>REACTPY_PRERENDER</code>","text":"<p>Default: <code>False</code></p> <p>Example Value(s): <code>True</code></p> <p>Configures whether to pre-render your components via HTTP, which enables SEO compatibility and reduces perceived latency.</p> <p>During pre-rendering, there are some key differences in behavior:</p> <ol> <li>Only the component's first paint is pre-rendered.</li> <li>All <code>connection</code> hooks will provide HTTP variants.</li> <li>The component will be non-interactive until a WebSocket connection is formed.</li> <li>The component is re-rendered once a WebSocket connection is formed.</li> </ol> <p>You can use the <code>prerender</code> argument in your template tag to manually override this default.</p>"},{"location":"reference/settings/#stability-settings","title":"Stability Settings","text":""},{"location":"reference/settings/#reactpy_reconnect_interval","title":"<code>REACTPY_RECONNECT_INTERVAL</code>","text":"<p>Default: <code>750</code></p> <p>Example Value(s): <code>100</code>, <code>2500</code>, <code>6000</code></p> <p>Milliseconds between client reconnection attempts.</p>"},{"location":"reference/settings/#reactpy_reconnect_backoff_multiplier","title":"<code>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</code>","text":"<p>Default: <code>1.25</code></p> <p>Example Value(s): <code>1</code>, <code>1.5</code>, <code>3</code></p> <p>On each reconnection attempt, the <code>REACTPY_RECONNECT_INTERVAL</code> will be multiplied by this value to increase the time between attempts.</p> <p>You can keep time between each reconnection the same by setting this to <code>1</code>.</p>"},{"location":"reference/settings/#reactpy_reconnect_max_interval","title":"<code>REACTPY_RECONNECT_MAX_INTERVAL</code>","text":"<p>Default: <code>60000</code></p> <p>Example Value(s): <code>10000</code>, <code>25000</code>, <code>900000</code></p> <p>Maximum milliseconds between client reconnection attempts.</p> <p>This allows setting an upper bound on how high <code>REACTPY_RECONNECT_BACKOFF_MULTIPLIER</code> can increase the time between reconnection attempts.</p>"},{"location":"reference/settings/#reactpy_reconnect_max_retries","title":"<code>REACTPY_RECONNECT_MAX_RETRIES</code>","text":"<p>Default: <code>150</code></p> <p>Example Value(s): <code>0</code>, <code>5</code>, <code>300</code></p> <p>Maximum number of reconnection attempts before the client gives up.</p>"},{"location":"reference/settings/#reactpy_session_max_age","title":"<code>REACTPY_SESSION_MAX_AGE</code>","text":"<p>Default: <code>259200</code></p> <p>Example Value(s): <code>0</code>, <code>60</code>, <code>96000</code></p> <p>Maximum seconds a ReactPy component session is valid for. Invalid sessions are deleted during ReactPy clean up.</p> <p>ReactPy sessions include data such as <code>*args</code> and <code>**kwargs</code> passed into your <code>{% component %}</code> template tag.</p> <p>Use <code>0</code> to not store any session data.</p>"},{"location":"reference/settings/#auto-clean-settings","title":"Auto-Clean Settings","text":""},{"location":"reference/settings/#reactpy_clean_interval","title":"<code>REACTPY_CLEAN_INTERVAL</code>","text":"<p>Default: <code>604800</code></p> <p>Example Value(s): <code>0</code>, <code>3600</code>, <code>86400</code>, <code>None</code></p> <p>Minimum seconds between ReactPy automatic clean up operations.</p> <p>After a component disconnection, the server will perform a clean up if this amount of time has passed since the last clean up.</p> <p>Set this value to <code>None</code> to disable automatic clean up operations.</p>"},{"location":"reference/settings/#reactpy_clean_sessions","title":"<code>REACTPY_CLEAN_SESSIONS</code>","text":"<p>Default: <code>True</code></p> <p>Example Value(s): <code>False</code></p> <p>Configures whether ReactPy should clean up expired component sessions during automatic clean up operations.</p>"},{"location":"reference/settings/#reactpy_clean_user_data","title":"<code>REACTPY_CLEAN_USER_DATA</code>","text":"<p>Default: <code>True</code></p> <p>Example Value(s): <code>False</code></p> <p>Configures whether ReactPy should clean up orphaned user data during automatic clean up operations.</p> <p>Typically, user data does not become orphaned unless the server crashes during a <code>User</code> delete operation.</p>"},{"location":"reference/template-tag/","title":"Template Tag","text":""},{"location":"reference/template-tag/#overview","title":"Overview","text":"<p>  Django template tags can be used within your HTML templates to provide ReactPy features.  </p>"},{"location":"reference/template-tag/#component","title":"Component","text":"<p>This template tag can be used to insert any number of server-side ReactPy components onto your page.</p> <p>Each component loaded via this template tag will receive a dedicated WebSocket connection to the server.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;body&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>dotted_path</code> <code>str</code> The dotted path to the component to render. N/A <code>*args</code> <code>Any</code> The positional arguments to provide to the component. N/A <code>class</code> <code>str | None</code> The HTML class to apply to the top-level component div. <code>None</code> <code>key</code> <code>Any</code> Force the component's root node to use a specific key value. Using <code>key</code> within a template tag is effectively useless. <code>None</code> <code>host</code> <code>str | None</code> The host to use for ReactPy connections. If unset, the host will be automatically configured.Example values include: <code>localhost:8000</code>, <code>example.com</code>, <code>example.com/subdir</code> <code>None</code> <code>prerender</code> <code>str</code> If <code>\"true\"</code> the component will pre-rendered, which enables SEO compatibility and reduces perceived latency. <code>\"false\"</code> <code>offline</code> <code>str</code> The dotted path to a component that will be displayed if your root component loses connection to the server. Keep in mind, this <code>offline</code> component will be non-interactive (hooks won't operate). <code>\"\"</code> <code>**kwargs</code> <code>Any</code> The keyword arguments to provide to the component. N/A Do not use context variables for the component path <p>The ReactPy component finder requires that your component path is a string.</p> <p>Do not use Django template/context variables for the component path. Failure to follow this warning will result in render failures.</p> <p>For example, do not do the following:</p> my_template.htmlviews.py <pre><code>&lt;!-- This is good --&gt;\n{% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n\n&lt;!-- This is bad --&gt;\n{% component my_variable recipient=\"World\" %}\n</code></pre> <pre><code>from django.shortcuts import render\n\n\ndef example_view(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_variable\": \"example_project.my_app.components.hello_world\"},\n    )\n</code></pre> <p>Note: If you decide to not follow this warning, you will need to use the <code>register_component</code> function to manually register your components.</p> Can I use multiple components on one page? <p>You can add as many components to a webpage as needed by using the template tag multiple times. Retrofitting legacy sites to use ReactPy will typically involve many components on one page.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;body&gt;\n        &lt;h1&gt;{% component \"example_project.my_app.components.my_title\" %}&lt;/h1&gt;\n        &lt;p&gt;{% component \"example_project.my_app_2.components.goodbye_world\" class=\"bold small-font\" %}&lt;/p&gt;\n{% component \"example_project.my_app_3.components.my_button\" %}\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre> <p>Please note that components separated like this will not be able to interact with each other, except through database queries.</p> <p>Additionally, in scenarios where you are trying to create a Single Page Application (SPA) within Django, you will only have one component within your <code>&lt;body&gt;</code> tag.</p> Can I use positional arguments instead of keyword arguments? <p>You can use any combination of <code>*args</code>/<code>**kwargs</code> in your template tag.</p> my_template.htmlcomponents.py <pre><code>{% component \"example_project.my_app.components.frog_greeter\" 123 \"Mr. Froggles\" species=\"Grey Treefrog\" %}\n</code></pre> <pre><code>from reactpy import component\n\n\n@component\ndef frog_greeter(number, name, species=\"\"):\n    return f\"Hello #{number}, {name} the {species}!\"\n</code></pre> Can I render components on a different server (distributed computing)? <p>Yes! This is most commonly done through <code>settings.py:REACTPY_HOSTS</code>. However, you can use the <code>host</code> keyword to render components on a specific ASGI server.</p> my_template.html <pre><code>...\n{% component \"example_project.my_app.components.do_something\" host=\"127.0.0.1:8001\" %}\n...\n</code></pre> <p>This configuration most commonly involves you deploying multiple instances of your project. But, you can also create dedicated Django project(s) that only render specific ReactPy components if you wish.</p> <p>Here's a couple of things to keep in mind:</p> <ol> <li>If your host address are completely separate ( <code>origin1.com != origin2.com</code> ) you will need to configure CORS headers on your main application during deployment.</li> <li>You will not need to register ReactPy WebSocket or HTTP paths on any applications that do not perform any component rendering.</li> <li>Your component will only be able to access your template tag's <code>*args</code>/<code>**kwargs</code> if your applications share a common database.</li> </ol> How do I pre-render components for SEO compatibility? <p>This is most commonly done through <code>settings.py:REACTPY_PRERENDER</code>. However, you can use the <code>prerender</code> keyword to pre-render a specific component.</p> my_template.html <pre><code>...\n{% component \"example_project.my_app.components.do_something\" prerender=\"true\" %}\n...\n</code></pre> How do I display something when the client disconnects? <p>You can use the <code>offline</code> keyword to display a specific component when the client disconnects from the server.</p> my_template.html <pre><code>...\n{% component \"example_project.my_app.components.do_something\" offline=\"example_project.my_app.components.offline\" %}\n...\n</code></pre> <p>Note: The <code>offline</code> component will be non-interactive (hooks won't operate).</p>"},{"location":"reference/template-tag/#pyscript-component","title":"PyScript Component","text":"<p>This template tag can be used to insert any number of client-side ReactPy components onto your page.</p> <p>By default, the only available dependencies are the Python standard library, <code>pyscript</code>, <code>pyodide</code>, <code>reactpy</code> core.</p> <p>The entire file path provided is loaded directly into the browser, and must have a <code>def root()</code> component to act as the entry point.</p> <p>Pitfall</p> <p>Similar to JavaScript, your provided Python file is loaded directly into the client (web browser) as raw text to run using the PyScript interpreter. Be cautious about what you include in your Python file.</p> <p>As a result being client-sided, Python packages within your local environment (such as those installed via <code>pip install ...</code>)  are not accessible within PyScript components.</p> my_template.htmlhello_world.py <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/hello_world.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    return html.div(\"Hello, World!\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*file_paths</code> <code>str</code> File path to your client-side component. If multiple paths are provided, the contents are automatically merged. N/A <code>initial</code> <code>str | VdomDict | ComponentType</code> The initial HTML that is displayed prior to the PyScript component loads. This can either be a string containing raw HTML, a <code>reactpy.html</code> snippet, or a non-interactive component. <code>\"\"</code> <code>root</code> <code>str</code> The name of the root component function. <code>\"root\"</code> How do I execute JavaScript within PyScript components? <p>PyScript components several options available to execute JavaScript, including...</p> <ul> <li>Pyodide's <code>js</code> module</li> <li>Pyscript's foreign function interface</li> <li>Pyscript's JavaScript modules.</li> </ul> <p>Pyodide JS Module</p> <p>The Pyodide <code>js</code> module has access to everything within the browser's JavaScript environment. Therefore, any global JavaScript functions loaded within your HTML <code>&lt;head&gt;</code> can be called as well. However, you will need to be mindful of JavaScript load order if using <code>async</code> or <code>deferred</code> loading!</p> root.py <pre><code>import js\nfrom reactpy import component, html\n\n\n@component\ndef root():\n    def on_click(event):\n        js.document.title = \"New window title\"\n\n    return html.button({\"onClick\": on_click}, \"Click Me!\")\n</code></pre> <p>PyScript FFI</p> <p>...</p> <p>PyScript JS Modules</p> <p>Assuming you have a local bundle stored within your project's static files, you can import JavaScript modules in a fashion similar to <code>import {moment} from 'static/moment.js'</code>. You will first need to configure your <code>{% pyscript_setup %}</code> block to make the <code>moment.js</code> module available to PyScript. Then, this module can be accessed within <code>pyscript.js_modules.*</code>.</p> root.pymy_template.html <pre><code>from reactpy import component, html\n\n\n@component\ndef root():\n    from pyscript.js_modules import moment\n\n    return html.div(\n        {\"id\": \"moment\"},\n        \"Using the JavaScript package 'moment' to calculate time: \",\n        moment.default().format(\"YYYY-MM-DD HH:mm:ss\"),\n    )\n</code></pre> <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js='{\"/static/moment.js\":\"moment\"}' %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> Does my entire component need to be contained in one file? <p>Splitting a large file into multiple files is a common practice in software development.</p> <p>However, PyScript components are run on the client browser. As such, they do not have access to your local development environment, and thus cannot <code>import</code> any local Python files.</p> <p>If your PyScript component file gets too large, you can declare multiple file paths instead. These files will automatically combined by ReactPy.</p> <p>Here is how we recommend splitting your component into multiple files while avoiding local imports but retaining type hints.</p> my_template.htmlroot.pychild.py <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/root.py\"\n    \"./example_project/my_app/components/child.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> <pre><code>from reactpy import component, html\n\nfrom example.components import child_component\n\n\n@component\ndef root():\n    return html.div(\"This text is from the root component.\", child_component())\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef child_component():\n    return html.div(\"This is a child component from a different file.\")\n</code></pre> How do I display something while the component is loading? <p>You can configure the <code>initial</code> keyword to display HTML while your PyScript component is loading.</p> <p>The value for <code>initial</code> is most commonly be a string containing raw HTML.</p> my_template.html <pre><code>&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/root.py\" initial=\"&lt;div&gt; Loading ... &lt;/div&gt;\" %}\n&lt;/body&gt;\n</code></pre> <p>However, you can also insert a <code>reactpy.html</code> snippet or a non-interactive <code>@component</code> via template context.</p> my_template.htmlviews.py <pre><code>&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/root.py\" initial=my_initial_object %}\n&lt;/body&gt;\n</code></pre> <pre><code>from django.shortcuts import render\nfrom reactpy import html\n\n\ndef index(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_initial_object\": html.div(\"Loading ...\")},\n    )\n</code></pre> Can I use a different name for my root component? <p>Yes, you can use the <code>root</code> keyword to specify a different name for your root function.</p> my_template.htmlmain.py <pre><code>&lt;body&gt;\n{% pyscript_component \"./example_project/my_app/components/main.py\" root=\"main\" %}\n&lt;/body&gt;\n</code></pre> <pre><code>from reactpy import component, html\n\n\n@component\ndef main():\n    return html.div(\"Hello, World!\")\n</code></pre>"},{"location":"reference/template-tag/#pyscript-setup","title":"PyScript Setup","text":"<p>This template tag configures the current page to be able to run <code>pyscript</code>.</p> <p>You can optionally use this tag to configure the current PyScript environment. For example, you can include a list of Python packages to automatically install within the PyScript environment.</p> my_template.html <pre><code>{% load reactpy %}\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup %}\n&lt;/head&gt;\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>*extra_py</code> <code>str</code> Dependencies that need to be loaded on the page for your PyScript components. Each dependency must be contained within it's own string and written in Python requirements file syntax. N/A <code>extra_js</code> <code>str | dict</code> A JSON string or Python dictionary containing a vanilla JavaScript module URL and the <code>name: str</code> to access it within <code>pyscript.js_modules.*</code>. <code>\"\"</code> <code>config</code> <code>str | dict</code> A JSON string or Python dictionary containing PyScript configuration values. <code>\"\"</code> How do I install additional Python dependencies? <p>Dependencies must be available on <code>pypi</code> and declared in your <code>{% pyscript_setup %}</code> block using Python requirements file syntax.</p> <p>These dependencies are automatically downloaded and installed into the PyScript client-side environment when the page is loaded.</p> my_template.html <pre><code>&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup \"dill==0.3.5\" \"markdown&lt;=3.6.0\" \"nest_asyncio\" \"titlecase\" %}\n&lt;/head&gt;\n</code></pre> How do I install additional Javascript dependencies? <p>You can use the <code>extra_js</code> keyword to load additional JavaScript modules into your PyScript environment.</p> my_template.htmlviews.py <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js=my_extra_js_object %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> <pre><code>from django.shortcuts import render\nfrom django.templatetags.static import static\n\n\ndef index(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_extra_js_object\": {static(\"moment.js\"): \"moment\"}},\n    )\n</code></pre> <p>The value for <code>extra_js</code> is most commonly a Python dictionary, but JSON strings are also supported.</p> my_template.html <pre><code>{% load reactpy %}\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup extra_js='{\"/static/moment.js\":\"moment\"}' %}\n&lt;/head&gt;\n\n&lt;body&gt;\n{% component \"example_project.my_app.components.root.py\" %}\n&lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre> How do I modify the <code>pyscript</code> default configuration? <p>You can modify the default PyScript configuration by providing a value to the <code>config</code> keyword.</p> my_template.html <pre><code>&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup config='{\"experimental_create_proxy\":\"auto\"}' %}\n&lt;/head&gt;\n</code></pre> <p>While this value is most commonly a JSON string, Python dictionary objects are also supported.</p> my_template.htmlviews.py <pre><code>&lt;head&gt;\n    &lt;title&gt;ReactPy&lt;/title&gt;\n{% pyscript_setup config=my_config_object %}\n&lt;/head&gt;\n</code></pre> <pre><code>from django.shortcuts import render\n\n\ndef index(request):\n    return render(\n        request,\n        \"my_template.html\",\n        context={\"my_config_object\": {\"experimental_create_proxy\": \"auto\"}},\n    )\n</code></pre> Can I use a local interpreter for PyScript? <p>Yes, you can set up a local interpreter by following PyScript's standard documentation.</p> <p>To summarize,</p> <ol> <li>Download the latest Pyodide bundle from the Pyodide GitHub releases page (for example <code>pyodide-0.26.3.tar.bz2</code>).</li> <li>Extract the contents of the bundle to your project's static files.</li> <li> <p>Configure your <code>{% pyscript_setup %}</code> template tag to use <code>pyodide</code> as an interpreter.</p> <pre><code>{% pyscript_setup config='{\"interpreter\":\"/static/pyodide/pyodide.mjs\"}' %}\n</code></pre> </li> </ol>"},{"location":"reference/utils/","title":"Utilities","text":""},{"location":"reference/utils/#overview","title":"Overview","text":"<p>  Utility functions provide various miscellaneous functionality for advanced use cases.  </p> <p>Pitfall</p> <p>Any utility functions not documented here are not considered part of the public API and may change without notice.</p>"},{"location":"reference/utils/#register-iframe","title":"Register Iframe","text":"<p>This function is used register a Django view as a ReactPy <code>iframe</code>.</p> <p>It is mandatory to use this function alongside <code>view_to_iframe</code>.</p> apps.py <pre><code>from django.apps import AppConfig\n\nfrom example import views\nfrom reactpy_django.utils import register_iframe\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_iframe(views.hello_world)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>view</code> <code>Callable | View | str</code> The view to register. Can be a function or class based view, or a dotted path to a view. N/A <p>Returns</p> <p><code>None</code></p> Only use this within <code>AppConfig.ready()</code> <p>You should always call <code>register_iframe</code> within a Django <code>AppConfig.ready()</code> method. This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.</p>"},{"location":"reference/utils/#register-component","title":"Register Component","text":"<p>This function is used register a root component with ReactPy.</p> <p>Typically, this function is automatically called on all components contained within Django templates.</p> apps.py <pre><code>from django.apps import AppConfig\n\nfrom reactpy_django.utils import register_component\n\n\nclass ExampleAppConfig(AppConfig):\n    name = \"example\"\n\n    def ready(self):\n        register_component(\"example_project.my_app.components.hello_world\")\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>component</code> <code>ComponentConstructor | str</code> The component to register. Can be a component function or dotted path to a component. N/A <p>Returns</p> <p><code>None</code></p> Only use this within <code>MyAppConfig.ready()</code> <p>You should always call <code>register_component</code> within a Django <code>MyAppConfig.ready()</code> method. This ensures you will retain multiprocessing compatibility, such as with ASGI web server workers.</p> Do I need to use this? <p>You typically will not need to use this function.</p> <p>For security reasons, ReactPy requires all root components to be registered. However, all components contained within Django templates are automatically registered.</p> <p>This function is commonly needed when you have configured your <code>host</code> to a dedicated Django rendering application that doesn't have templates.</p>"},{"location":"reference/utils/#django-query-postprocessor","title":"Django Query Postprocessor","text":"<p>This is the default postprocessor for the <code>use_query</code> hook.</p> <p>Since ReactPy is rendered within an <code>asyncio</code> loop, this postprocessor is exists to prevent Django's <code>SynchronousOnlyException</code> by recursively prefetching fields within Django's ORM. Note that this effectively eliminates Django's lazy execution behavior.</p> components.pymodels.py <pre><code>from reactpy import component\n\nfrom example.models import TodoItem\nfrom reactpy_django.hooks import use_query\nfrom reactpy_django.utils import django_query_postprocessor\n\n\ndef get_items():\n    return TodoItem.objects.all()\n\n\n@component\ndef todo_list():\n    # These postprocessor options are functionally equivalent to ReactPy-Django's default values\n    item_query = use_query(\n        get_items,\n        postprocessor=django_query_postprocessor,\n        postprocessor_kwargs={\"many_to_many\": True, \"many_to_one\": True},\n    )\n\n    return item_query.data\n</code></pre> <pre><code>from django.db.models import CharField, Model\n\n\nclass TodoItem(Model):\n    text: CharField = CharField(max_length=255)\n</code></pre> See Interface <p>Parameters</p> Name Type Description Default <code>data</code> <code>QuerySet | Model</code> The <code>Model</code> or <code>QuerySet</code> to recursively fetch fields from. N/A <code>many_to_many</code> <code>bool</code> Whether or not to recursively fetch <code>ManyToManyField</code> relationships. <code>True</code> <code>many_to_one</code> <code>bool</code> Whether or not to recursively fetch <code>ForeignKey</code> relationships. <code>True</code> <p>Returns</p> Type Description <code>QuerySet | Model</code> The <code>Model</code> or <code>QuerySet</code> with all fields fetched."}]}
\ No newline at end of file
diff --git a/develop/sitemap.xml b/develop/sitemap.xml
index bca3f08a..2ad8787a 100644
--- a/develop/sitemap.xml
+++ b/develop/sitemap.xml
@@ -2,62 +2,62 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/about/changelog/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/about/contributing/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/about/license/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/learn/add-reactpy-to-a-django-project/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/learn/your-first-component/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/components/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/decorators/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/hooks/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/html/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/management-commands/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/router/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/settings/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/template-tag/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
     <url>
          <loc>https://reactive-python.github.io/reactpy-django/develop/reference/utils/</loc>
-         <lastmod>2024-12-01</lastmod>
+         <lastmod>2024-12-02</lastmod>
     </url>
 </urlset>
\ No newline at end of file
diff --git a/develop/sitemap.xml.gz b/develop/sitemap.xml.gz
index 7d23e60c7d39a1c1fb79c25bf77c970e7c028dd3..4dcc57325980a2893bed65e7d51f0481fbed54d0 100644
GIT binary patch
delta 185
zcmV;q07n1c0^b59ABzYGfcQ*j0{?SqbY*Q}a4vXlYyi!cv2w#83_$mMh0i-C@sTAf
zf8I3fx`JrY`8aIrkM}qAT<`i-H&e*Kl^Dmotw-kcs`dGNZn9^XOv(+?ptBuC$oj6-
z>*l5ISCzEI!EJPHT|nC}Ub46$FqZuZRJ!npu^Bv%^S<$Tn@JbtjwTMM9h@Lw(w$zG
n|Mq4wPw4t~-9D*JtJbZU+;z9@^<)2kk<W+-%}IR!rwIT6(EnpQ

delta 185
zcmV;q07n1c0^b59ABzYG0H;f50{?SqbY*Q}a4vXlYyi!cv2w#83_$mMh0i<2$&n>1
ze_l6jT|u<yd>pp*$NQUlu6O;an<-@AN{nOP)+2Lz)%tusH`y~xCglcc(Akb6WPMla
zwt1=hRV8h4a2s7)7tr>Lmn?1wjAefUl`cGDYzEKcyl*_-X3|Buqlp7*2PX)abf=f)
nzrC5v6S{uWZl2V7quRBY+;z9@^<)2kk<W+-`T-jArwIT6g~wW5