mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-08-15 19:50:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
django-components/dev/concepts/advanced/provide_inject/index.html

43 lines
No EOL
51 KiB
HTML
Raw Blame History

<!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="A way to create simple reusable template components in Django."><link href=https://emilstenstrom.github.io/django-components/latest/concepts/advanced/provide_inject/ rel=canonical><link href=../rendering_js_css/ rel=prev><link href=../hooks/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.5.49"><title>Prop drilling and provide / inject - Django-Components</title><link rel=stylesheet href=../../../assets/stylesheets/main.6f8fc17f.min.css><link rel=stylesheet href=../../../assets/stylesheets/palette.06af60db.min.css><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/_markdown_exec_pyodide.css><link rel=stylesheet href=../../../assets/_mkdocstrings.css><link rel=stylesheet href=../../../css/timeago.css><link rel=stylesheet href=../../../css/style.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><meta property=og:type content=website><meta property=og:title content="Prop drilling and provide / inject - Django-Components"><meta property=og:description content="A way to create simple reusable template components in Django."><meta property=og:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/concepts/advanced/provide_inject.png><meta property=og:image:type content=image/png><meta property=og:image:width content=1200><meta property=og:image:height content=630><meta content=https://emilstenstrom.github.io/django-components/latest/concepts/advanced/provide_inject/ property=og:url><meta name=twitter:card content=summary_large_image><meta name=twitter:title content="Prop drilling and provide / inject - Django-Components"><meta name=twitter:description content="A way to create simple reusable template components in Django."><meta name=twitter:image content=https://emilstenstrom.github.io/django-components/latest/assets/images/social/concepts/advanced/provide_inject.png></head> <body dir=ltr data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo> <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=#what-is-prop-drilling class=md-skip> Skip to content </a> </div> <div data-md-component=announce> <aside class=md-banner> <div class="md-banner__inner md-grid md-typeset"> 🚨The documentation is still a work in progress. 🚨 </div> </aside> </div> <div data-md-color-scheme=default data-md-component=outdated hidden> </div> <header class=md-header data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title=Django-Components class="md-header__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </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 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></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> Django-Components </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Prop drilling and provide / inject </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media=(prefers-color-scheme) data-md-color-scheme=default data-md-color-primary=indigo data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-9.15 3.96h2.3L12 9z"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_2 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 3zm3.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.95zm-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.31"/></svg> </label> <input class=md-option data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=indigo aria-label="Switch to light mode" type=radio name=__palette id=__palette_2> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <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.52 6.52 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 5"/></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.52 6.52 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 5"/></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 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <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 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 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/EmilStenstrom/django-components 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.7.1 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 2024 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.6m-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.3m44.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.9M244.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 8M97.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-1m-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.7m32.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-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> </nav> </header> <div class=md-container data-md-component=container> <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=../../../overview/welcome/ class=md-tabs__link> Get Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../../getting_started/your_first_component/ class=md-tabs__link> Concepts </a> </li> <li class=md-tabs__item> <a href=../../../guides/setup/syntax_highlight/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../../reference/api/ class=md-tabs__link> API Documentation </a> </li> <li class=md-tabs__item> <a href=../../../release_notes/ class=md-tabs__link> Release notes </a> </li> </ul> </div> </nav> <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=Django-Components class="md-nav__button md-logo" aria-label=Django-Components data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Django-Components </label> <div class=md-nav__source> <a href=https://github.com/EmilStenstrom/django-components 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.7.1 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 2024 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.6m-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.3m44.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.9M244.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 8M97.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-1m-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.7m32.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-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> EmilStenstrom/django-components </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_1> <label class=md-nav__link for=__nav_1 id=__nav_1_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_1_label aria-expanded=false> <label class=md-nav__title for=__nav_1> <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=../../../overview/welcome/ class=md-nav__link> <span class=md-ellipsis> Welcome to Django Components </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/compatibility/ class=md-nav__link> <span class=md-ellipsis> Compatibility </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/installation/ class=md-nav__link> <span class=md-ellipsis> Installation </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/security_notes/ class=md-nav__link> <span class=md-ellipsis> Security notes 🚨 </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/community/ class=md-nav__link> <span class=md-ellipsis> Community </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/contributing/ class=md-nav__link> <span class=md-ellipsis> Contributing </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/development/ class=md-nav__link> <span class=md-ellipsis> Development </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/code_of_conduct/ class=md-nav__link> <span class=md-ellipsis> Code of Conduct </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2 checked> <label class=md-nav__link for=__nav_2 id=__nav_2_label tabindex> <span class=md-ellipsis> Concepts </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=true> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Concepts </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_1> <label class=md-nav__link for=__nav_2_1 id=__nav_2_1_label tabindex> <span class=md-ellipsis> Getting started </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_1_label aria-expanded=false> <label class=md-nav__title for=__nav_2_1> <span class="md-nav__icon md-icon"></span> Getting started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../getting_started/your_first_component/ class=md-nav__link> <span class=md-ellipsis> Create your first component </span> </a> </li> <li class=md-nav__item> <a href=../../getting_started/adding_js_and_css/ class=md-nav__link> <span class=md-ellipsis> Adding JS and CSS </span> </a> </li> <li class=md-nav__item> <a href=../../getting_started/components_in_templates/ class=md-nav__link> <span class=md-ellipsis> Components in templates </span> </a> </li> <li class=md-nav__item> <a href=../../getting_started/parametrising_components/ class=md-nav__link> <span class=md-ellipsis> Parametrising components </span> </a> </li> <li class=md-nav__item> <a href=../../getting_started/adding_slots/ class=md-nav__link> <span class=md-ellipsis> Adding slots </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2_2> <label class=md-nav__link for=__nav_2_2 id=__nav_2_2_label tabindex> <span class=md-ellipsis> Fundamentals </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2_2> <span class="md-nav__icon md-icon"></span> Fundamentals </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../fundamentals/single_file_components/ class=md-nav__link> <span class=md-ellipsis> Single-file components </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_in_python/ class=md-nav__link> <span class=md-ellipsis> Components in Python </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/access_component_input/ class=md-nav__link> <span class=md-ellipsis> Accessing component inputs </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/component_context_scope/ class=md-nav__link> <span class=md-ellipsis> Component context and scope </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/template_tag_syntax/ class=md-nav__link> <span class=md-ellipsis> Template tag syntax </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/slots/ class=md-nav__link> <span class=md-ellipsis> Slots </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/html_attributes/ class=md-nav__link> <span class=md-ellipsis> HTML attributes </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/defining_js_css_html_files/ class=md-nav__link> <span class=md-ellipsis> Defining HTML / JS / CSS files </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/autodiscovery/ class=md-nav__link> <span class=md-ellipsis> Autodiscovery </span> </a> </li> <li class=md-nav__item> <a href=../../fundamentals/components_as_views/ class=md-nav__link> <span class=md-ellipsis> Components as views </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_2_3 checked> <label class=md-nav__link for=__nav_2_3 id=__nav_2_3_label tabindex> <span class=md-ellipsis> Advanced </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_2_3_label aria-expanded=true> <label class=md-nav__title for=__nav_2_3> <span class="md-nav__icon md-icon"></span> Advanced </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../rendering_js_css/ class=md-nav__link> <span class=md-ellipsis> Rendering JS / CSS </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> Prop drilling and provide / inject </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Prop drilling and provide / inject </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=#what-is-prop-drilling class=md-nav__link> <span class=md-ellipsis> What is "prop drilling"? </span> </a> </li> <li class=md-nav__item> <a href=#how-to-use-provide-inject class=md-nav__link> <span class=md-ellipsis> How to use provide / inject </span> </a> </li> <li class=md-nav__item> <a href=#using-provide-tag class=md-nav__link> <span class=md-ellipsis> Using {% provide %} tag </span> </a> </li> <li class=md-nav__item> <a href=#using-inject-method class=md-nav__link> <span class=md-ellipsis> Using inject() method </span> </a> </li> <li class=md-nav__item> <a href=#full-example class=md-nav__link> <span class=md-ellipsis> Full example </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../hooks/ class=md-nav__link> <span class=md-ellipsis> Lifecycle hooks </span> </a> </li> <li class=md-nav__item> <a href=../component_registry/ class=md-nav__link> <span class=md-ellipsis> Registering components </span> </a> </li> <li class=md-nav__item> <a href=../typing_and_validation/ class=md-nav__link> <span class=md-ellipsis> Typing and validation </span> </a> </li> <li class=md-nav__item> <a href=../tag_formatter/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../authoring_component_libraries/ class=md-nav__link> <span class=md-ellipsis> Authoring component libraries </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex=0> <span class=md-ellipsis> Guides </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> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_1> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex=0> <span class=md-ellipsis> Setup </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=false> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Setup </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/setup/syntax_highlight/ class=md-nav__link> <span class=md-ellipsis> Syntax highlighting </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/dev_server_setup/ class=md-nav__link> <span class=md-ellipsis> Running with development server </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/setup/logging_and_debugging/ class=md-nav__link> <span class=md-ellipsis> Logging and debugging </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex=0> <span class=md-ellipsis> Dev guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Dev guides </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/devguides/dependency_mgmt/ class=md-nav__link> <span class=md-ellipsis> JS and CSS rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slot_rendering/ class=md-nav__link> <span class=md-ellipsis> Slot rendering </span> </a> </li> <li class=md-nav__item> <a href=../../../guides/devguides/slots_and_blocks/ class=md-nav__link> <span class=md-ellipsis> Using slot and block tags </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> API Documentation </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> API Documentation </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../reference/api/ class=md-nav__link> <span class=md-ellipsis> Api </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/commands/ class=md-nav__link> <span class=md-ellipsis> Commands </span> </a> </li> <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/exceptions/ class=md-nav__link> <span class=md-ellipsis> Exceptions </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/middlewares/ class=md-nav__link> <span class=md-ellipsis> Middlewares </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/tag_formatters/ class=md-nav__link> <span class=md-ellipsis> Tag formatters </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_tags/ class=md-nav__link> <span class=md-ellipsis> Template tags </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/template_vars/ class=md-nav__link> <span class=md-ellipsis> Template vars </span> </a> </li> <li class=md-nav__item> <a href=../../../reference/urls/ class=md-nav__link> <span class=md-ellipsis> Urls </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=../../../release_notes/ class=md-nav__link> <span class=md-ellipsis> Release notes </span> </a> </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=#what-is-prop-drilling class=md-nav__link> <span class=md-ellipsis> What is "prop drilling"? </span> </a> </li> <li class=md-nav__item> <a href=#how-to-use-provide-inject class=md-nav__link> <span class=md-ellipsis> How to use provide / inject </span> </a> </li> <li class=md-nav__item> <a href=#using-provide-tag class=md-nav__link> <span class=md-ellipsis> Using {% provide %} tag </span> </a> </li> <li class=md-nav__item> <a href=#using-inject-method class=md-nav__link> <span class=md-ellipsis> Using inject() method </span> </a> </li> <li class=md-nav__item> <a href=#full-example class=md-nav__link> <span class=md-ellipsis> Full example </span> </a> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <article class="md-content__inner md-typeset"> <a href=https://github.com/EmilStenstrom/django-components/edit/master/docs/concepts/advanced/provide_inject.md title="Edit this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg> </a> <a href=https://github.com/EmilStenstrom/django-components/raw/master/docs/concepts/advanced/provide_inject.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg> </a> <h1>Prop drilling and provide / inject</h1> <p><em>New in version 0.80</em>:</p> <p>Django components supports the provide / inject or ContextProvider pattern with the combination of:</p> <ol> <li><code>{% provide %}</code> tag</li> <li><code>inject()</code> method of the <code>Component</code> class</li> </ol> <h2 id=what-is-prop-drilling>What is "prop drilling"?<a class=headerlink href=#what-is-prop-drilling title="Permanent link">¤</a></h2> <p>Prop drilling refers to a scenario in UI development where you need to pass data through many layers of a component tree to reach the nested components that actually need the data.</p> <p>Normally, you'd use props to send data from a parent component to its children. However, this straightforward method becomes cumbersome and inefficient if the data has to travel through many levels or if several components scattered at different depths all need the same piece of information.</p> <p>This results in a situation where the intermediate components, which don't need the data for their own functioning, end up having to manage and pass along these props. This clutters the component tree and makes the code verbose and harder to manage.</p> <p>A neat solution to avoid prop drilling is using the "provide and inject" technique.</p> <p>With provide / inject, a parent component acts like a data hub for all its descendants. This setup allows any component, no matter how deeply nested it is, to access the required data directly from this centralized provider without having to messily pass props down the chain. This approach significantly cleans up the code and makes it easier to maintain.</p> <p>This feature is inspired by Vue's <a href=https://vuejs.org/guide/components/provide-inject>Provide / Inject</a> and React's <a href=https://react.dev/learn/passing-data-deeply-with-context>Context / useContext</a>.</p> <h2 id=how-to-use-provide-inject>How to use provide / inject<a class=headerlink href=#how-to-use-provide-inject title="Permanent link">¤</a></h2> <p>As the name suggest, using provide / inject consists of 2 steps</p> <ol> <li>Providing data</li> <li>Injecting provided data</li> </ol> <p>For examples of advanced uses of provide / inject, <a href=https://github.com/EmilStenstrom/django-components/pull/506#issuecomment-2132102584>see this discussion</a>.</p> <h2 id=using-provide-tag>Using <code>{% provide %}</code> tag<a class=headerlink href=#using-provide-tag title="Permanent link">¤</a></h2> <p>First we use the <code>{% provide %}</code> tag to define the data we want to "provide" (make available).</p> <div class=highlight><pre><span></span><code><a id=__codelineno-0-1 name=__codelineno-0-1 href=#__codelineno-0-1></a><span class=cp>{%</span> <span class=k>provide</span> <span class=s2>&quot;my_data&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=s2>&quot;hi&quot;</span> <span class=nv>another</span><span class=o>=</span><span class=m>123</span> <span class=cp>%}</span>
<a id=__codelineno-0-2 name=__codelineno-0-2 href=#__codelineno-0-2></a><span class=x> </span><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;child&quot;</span> <span class=o>/</span> <span class=cp>%}</span><span class=x> &lt;--- Can access &quot;my_data&quot;</span>
<a id=__codelineno-0-3 name=__codelineno-0-3 href=#__codelineno-0-3></a><span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
<a id=__codelineno-0-4 name=__codelineno-0-4 href=#__codelineno-0-4></a>
<a id=__codelineno-0-5 name=__codelineno-0-5 href=#__codelineno-0-5></a><span class=cp>{%</span> <span class=k>component</span> <span class=s2>&quot;child&quot;</span> <span class=o>/</span> <span class=cp>%}</span><span class=x> &lt;--- Cannot access &quot;my_data&quot;</span>
</code></pre></div> <p>Notice that the <code>provide</code> tag REQUIRES a name as a first argument. This is the <em>key</em> by which we can then access the data passed to this tag.</p> <p><code>provide</code> tag name must resolve to a valid identifier (AKA a valid Python variable name).</p> <p>Once you've set the name, you define the data you want to "provide" by passing it as keyword arguments. This is similar to how you pass data to the <code>{% with %}</code> tag.</p> <blockquote> <p>NOTE: Kwargs passed to <code>{% provide %}</code> are NOT added to the context. In the example below, the <code>{{ key }}</code> won't render anything:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-1-1 name=__codelineno-1-1 href=#__codelineno-1-1></a><span class=cp>{%</span> <span class=k>provide</span> <span class=s2>&quot;my_data&quot;</span> <span class=nv>key</span><span class=o>=</span><span class=s2>&quot;hi&quot;</span> <span class=nv>another</span><span class=o>=</span><span class=m>123</span> <span class=cp>%}</span>
<a id=__codelineno-1-2 name=__codelineno-1-2 href=#__codelineno-1-2></a><span class=x> </span><span class=cp>{{</span> <span class=nv>key</span> <span class=cp>}}</span>
<a id=__codelineno-1-3 name=__codelineno-1-3 href=#__codelineno-1-3></a><span class=cp>{%</span> <span class=k>endprovide</span> <span class=cp>%}</span>
</code></pre></div> </blockquote> <p>Similarly to <a href=#dynamic-slots-and-fills>slots and fills</a>, also provide's name argument can be set dynamically via a variable, a template expression, or a spread operator:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-2-1 name=__codelineno-2-1 href=#__codelineno-2-1></a><span class=cp>{%</span> <span class=k>provide</span> <span class=nv>name</span><span class=o>=</span><span class=nv>name</span> <span class=p>...</span> <span class=cp>%}</span>
<a id=__codelineno-2-2 name=__codelineno-2-2 href=#__codelineno-2-2></a><span class=x> ...</span>
<a id=__codelineno-2-3 name=__codelineno-2-3 href=#__codelineno-2-3></a><span class=cp>{%</span> <span class=k>provide</span> <span class=cp>%}</span>
<a id=__codelineno-2-4 name=__codelineno-2-4 href=#__codelineno-2-4></a><span class=x>&lt;/table&gt;</span>
</code></pre></div> <h2 id=using-inject-method>Using <code>inject()</code> method<a class=headerlink href=#using-inject-method title="Permanent link">¤</a></h2> <p>To "inject" (access) the data defined on the <code>provide</code> tag, you can use the <code>inject()</code> method inside of <code>get_context_data()</code>.</p> <p>For a component to be able to "inject" some data, the component (<code>{% component %}</code> tag) must be nested inside the <code>{% provide %}</code> tag.</p> <p>In the example from previous section, we've defined two kwargs: <code>key="hi" another=123</code>. That means that if we now inject <code>"my_data"</code>, we get an object with 2 attributes - <code>key</code> and <code>another</code>.</p> <div class=highlight><pre><span></span><code><a id=__codelineno-3-1 name=__codelineno-3-1 href=#__codelineno-3-1></a><span class=k>class</span> <span class=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-3-2 name=__codelineno-3-2 href=#__codelineno-3-2></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-3-3 name=__codelineno-3-3 href=#__codelineno-3-3></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_data&quot;</span><span class=p>)</span>
<a id=__codelineno-3-4 name=__codelineno-3-4 href=#__codelineno-3-4></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>key</span><span class=p>)</span> <span class=c1># hi</span>
<a id=__codelineno-3-5 name=__codelineno-3-5 href=#__codelineno-3-5></a> <span class=nb>print</span><span class=p>(</span><span class=n>my_data</span><span class=o>.</span><span class=n>another</span><span class=p>)</span> <span class=c1># 123</span>
<a id=__codelineno-3-6 name=__codelineno-3-6 href=#__codelineno-3-6></a> <span class=k>return</span> <span class=p>{}</span>
</code></pre></div> <p>First argument to <code>inject</code> is the <em>key</em> (or <em>name</em>) of the provided data. This must match the string that you used in the <code>provide</code> tag. If no provider with given key is found, <code>inject</code> raises a <code>KeyError</code>.</p> <p>To avoid the error, you can pass a second argument to <code>inject</code> to which will act as a default value, similar to <code>dict.get(key, default)</code>:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-4-1 name=__codelineno-4-1 href=#__codelineno-4-1></a><span class=k>class</span> <span class=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-4-2 name=__codelineno-4-2 href=#__codelineno-4-2></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-4-3 name=__codelineno-4-3 href=#__codelineno-4-3></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;invalid_key&quot;</span><span class=p>,</span> <span class=n>DEFAULT_DATA</span><span class=p>)</span>
<a id=__codelineno-4-4 name=__codelineno-4-4 href=#__codelineno-4-4></a> <span class=k>assert</span> <span class=n>my_data</span> <span class=o>==</span> <span class=n>DEFAUKT_DATA</span>
<a id=__codelineno-4-5 name=__codelineno-4-5 href=#__codelineno-4-5></a> <span class=k>return</span> <span class=p>{}</span>
</code></pre></div> <p>The instance returned from <code>inject()</code> is a subclass of <code>NamedTuple</code>, so the instance is immutable. This ensures that the data returned from <code>inject</code> will always have all the keys that were passed to the <code>provide</code> tag.</p> <blockquote> <p>NOTE: <code>inject()</code> works strictly only in <code>get_context_data</code>. If you try to call it from elsewhere, it will raise an error.</p> </blockquote> <h2 id=full-example>Full example<a class=headerlink href=#full-example title="Permanent link">¤</a></h2> <div class=highlight><pre><span></span><code><a id=__codelineno-5-1 name=__codelineno-5-1 href=#__codelineno-5-1></a><span class=nd>@register</span><span class=p>(</span><span class=s2>&quot;child&quot;</span><span class=p>)</span>
<a id=__codelineno-5-2 name=__codelineno-5-2 href=#__codelineno-5-2></a><span class=k>class</span> <span class=nc>ChildComponent</span><span class=p>(</span><span class=n>Component</span><span class=p>):</span>
<a id=__codelineno-5-3 name=__codelineno-5-3 href=#__codelineno-5-3></a> <span class=n>template</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-5-4 name=__codelineno-5-4 href=#__codelineno-5-4></a><span class=s2> &lt;div&gt; {{ my_data.key }} &lt;/div&gt;</span>
<a id=__codelineno-5-5 name=__codelineno-5-5 href=#__codelineno-5-5></a><span class=s2> &lt;div&gt; {{ my_data.another }} &lt;/div&gt;</span>
<a id=__codelineno-5-6 name=__codelineno-5-6 href=#__codelineno-5-6></a><span class=s2> &quot;&quot;&quot;</span>
<a id=__codelineno-5-7 name=__codelineno-5-7 href=#__codelineno-5-7></a>
<a id=__codelineno-5-8 name=__codelineno-5-8 href=#__codelineno-5-8></a> <span class=k>def</span> <span class=nf>get_context_data</span><span class=p>(</span><span class=bp>self</span><span class=p>):</span>
<a id=__codelineno-5-9 name=__codelineno-5-9 href=#__codelineno-5-9></a> <span class=n>my_data</span> <span class=o>=</span> <span class=bp>self</span><span class=o>.</span><span class=n>inject</span><span class=p>(</span><span class=s2>&quot;my_data&quot;</span><span class=p>,</span> <span class=s2>&quot;default&quot;</span><span class=p>)</span>
<a id=__codelineno-5-10 name=__codelineno-5-10 href=#__codelineno-5-10></a> <span class=k>return</span> <span class=p>{</span><span class=s2>&quot;my_data&quot;</span><span class=p>:</span> <span class=n>my_data</span><span class=p>}</span>
<a id=__codelineno-5-11 name=__codelineno-5-11 href=#__codelineno-5-11></a>
<a id=__codelineno-5-12 name=__codelineno-5-12 href=#__codelineno-5-12></a><span class=n>template_str</span> <span class=o>=</span> <span class=s2>&quot;&quot;&quot;</span>
<a id=__codelineno-5-13 name=__codelineno-5-13 href=#__codelineno-5-13></a><span class=s2> {</span><span class=si>% lo</span><span class=s2>ad component_tags %}</span>
<a id=__codelineno-5-14 name=__codelineno-5-14 href=#__codelineno-5-14></a><span class=s2> {% provide &quot;my_data&quot; key=&quot;hi&quot; another=123 %}</span>
<a id=__codelineno-5-15 name=__codelineno-5-15 href=#__codelineno-5-15></a><span class=s2> {</span><span class=si>% c</span><span class=s2>omponent &quot;child&quot; / %}</span>
<a id=__codelineno-5-16 name=__codelineno-5-16 href=#__codelineno-5-16></a><span class=s2> {</span><span class=si>% e</span><span class=s2>ndprovide %}</span>
<a id=__codelineno-5-17 name=__codelineno-5-17 href=#__codelineno-5-17></a><span class=s2>&quot;&quot;&quot;</span>
</code></pre></div> <p>renders:</p> <div class=highlight><pre><span></span><code><a id=__codelineno-6-1 name=__codelineno-6-1 href=#__codelineno-6-1></a><span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>hi<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
<a id=__codelineno-6-2 name=__codelineno-6-2 href=#__codelineno-6-2></a><span class=p>&lt;</span><span class=nt>div</span><span class=p>&gt;</span>123<span class=p>&lt;/</span><span class=nt>div</span><span class=p>&gt;</span>
</code></pre></div> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago"><span class=timeago datetime=2024-12-02T08:54:59+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date">2024-12-02</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Contributors> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></svg> </span> <nav> <a href=mailto:juraj.oravec.josefson@gmail.com>Juro Oravec</a> </nav> </span> </aside> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </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 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../rendering_js_css/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Rendering JS / CSS"> <div class="md-footer__button md-icon"> <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 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Rendering JS / CSS </div> </div> </a> <a href=../hooks/ class="md-footer__link md-footer__link--next" aria-label="Next: Lifecycle hooks"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Lifecycle hooks </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/EmilStenstrom/django-components target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.1 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 2024 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.6m-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.3m44.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.9M244.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 8M97.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-1m-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.7m32.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-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://pypi.org/project/django-components/ target=_blank rel=noopener title=pypi.org class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 448 512"><!-- Font Awesome Free 6.7.1 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 2024 Fonticons, Inc.--><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6M286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3M167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4m-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"base": "../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tabs.link", "navigation.expand", "navigation.footer", "navigation.instant", "navigation.instant.progress", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.tracking", "navigation.top", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.6ce7567c.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": {"alias": true, "default": ["dev"], "provider": "mike"}}</script> <script src=../../../assets/javascripts/bundle.88dd0f4e.min.js></script> <script src=../../../assets/_markdown_exec_pyodide.js></script> <script src=../../../js/timeago.min.js></script> <script src=../../../js/timeago_mkdocs_material.js></script> </body> </html>
Reference in a new issue View git blame Copy permalink