Component caching allows you to store the rendered output of a component. Next time the component is rendered with the same input, the cached output is returned instead of re-rendering the component.
This is particularly useful for components that are expensive to render or do not change frequently.
Info
Component caching uses Django's cache framework, so you can use any cache backend that is supported by Django.
Caching is disabled by default.
To enable caching for a component, set Component.Cache.enabled to True:
from django_components import Component
+ Component caching - Django-Components Component caching
Component caching allows you to store the rendered output of a component. Next time the component is rendered with the same input, the cached output is returned instead of re-rendering the component.
This is particularly useful for components that are expensive to render or do not change frequently.
Info
Component caching uses Django's cache framework, so you can use any cache backend that is supported by Django.
Enabling caching¤
Caching is disabled by default.
To enable caching for a component, set Component.Cache.enabled to True:
from django_components import Component
class MyComponent(Component):
class Cache:
diff --git a/dev/concepts/advanced/component_context_scope/index.html b/dev/concepts/advanced/component_context_scope/index.html
index b272670e..7ea05722 100644
--- a/dev/concepts/advanced/component_context_scope/index.html
+++ b/dev/concepts/advanced/component_context_scope/index.html
@@ -1,4 +1,4 @@
- Component context and scope - Django-Components Component context and scope
By default, context variables are passed down the template as in regular Django - deeper scopes can access the variables from the outer scopes. So if you have several nested forloops, then inside the deep-most loop you can access variables defined by all previous loops.
With this in mind, the {% component %} tag behaves similarly to {% include %} tag - inside the component tag, you can access all variables that were defined outside of it.
And just like with {% include %}, if you don't want a specific component template to have access to the parent context, add only to the {% component %} tag:
{% component "calendar" date="2015-06-19" only / %}
+ Component context and scope - Django-Components Component context and scope
By default, context variables are passed down the template as in regular Django - deeper scopes can access the variables from the outer scopes. So if you have several nested forloops, then inside the deep-most loop you can access variables defined by all previous loops.
With this in mind, the {% component %} tag behaves similarly to {% include %} tag - inside the component tag, you can access all variables that were defined outside of it.
And just like with {% include %}, if you don't want a specific component template to have access to the parent context, add only to the {% component %} tag:
NOTE: {% csrf_token %} tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the only modifier.
If you find yourself using the only modifier often, you can set the context_behavior option to "isolated", which automatically applies the only modifier. This is useful if you want to make sure that components don't accidentally access the outer context.
Components can also access the outer context in their context methods like get_template_data by accessing the property self.outer_context.
Example of Accessing Outer Context¤
Then if get_template_data() of the component "my_comp" returns following data:
Then the template will be rendered as:
Because variables "my_var" and "cheese" are searched only inside RootComponent.get_template_data(). But since "cheese" is not defined there, it's empty.
Info
Notice that the variables defined with the {% with %} tag are ignored inside the {% fill %} tag with the "isolated" mode.
\ No newline at end of file
+
Because variables "my_var" and "cheese" are searched only inside RootComponent.get_template_data(). But since "cheese" is not defined there, it's empty.
Info
Notice that the variables defined with the {% with %} tag are ignored inside the {% fill %} tag with the "isolated" mode.
\ No newline at end of file
diff --git a/dev/concepts/advanced/component_libraries/index.html b/dev/concepts/advanced/component_libraries/index.html
index f866d59b..36fa7817 100644
--- a/dev/concepts/advanced/component_libraries/index.html
+++ b/dev/concepts/advanced/component_libraries/index.html
@@ -1,4 +1,4 @@
- Component libraries - Django-Components Component libraries
You can publish and share your components for others to use. Below you will find the steps to do so.
For live examples, see the Community examples.
Writing component libraries¤
-
Create a Django project with a similar structure:
project/
+ Component libraries - Django-Components Component libraries
You can publish and share your components for others to use. Below you will find the steps to do so.
For live examples, see the Community examples.
Writing component libraries¤
-
Create a Django project with a similar structure:
-
And, at last, you can use the components in your own project!
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/advanced/component_registry/index.html b/dev/concepts/advanced/component_registry/index.html
index 7094baec..7c069fca 100644
--- a/dev/concepts/advanced/component_registry/index.html
+++ b/dev/concepts/advanced/component_registry/index.html
@@ -1,4 +1,4 @@
- Registering components - Django-Components Registering components
In previous examples you could repeatedly see us using @register() to "register" the components. In this section we dive deeper into what it actually means and how you can manage (add or remove) components.
As a reminder, we may have a component like this:
from django_components import Component, register
+ Registering components - Django-Components Registering components
In previous examples you could repeatedly see us using @register() to "register" the components. In this section we dive deeper into what it actually means and how you can manage (add or remove) components.
As a reminder, we may have a component like this:
from django_components import Component, register
@register("calendar")
class Calendar(Component):
@@ -56,4 +56,4 @@
tag_formatter="django_components.component_formatter",
),
)
-
These settings are the same as the ones you can set for django_components.
In fact, when you set COMPONENT.tag_formatter or COMPONENT.context_behavior, these are forwarded to the default ComponentRegistry.
This makes it possible to have multiple registries with different settings in one projects, and makes sharing of component libraries possible.
\ No newline at end of file
+
These settings are the same as the ones you can set for django_components.
In fact, when you set COMPONENT.tag_formatter or COMPONENT.context_behavior, these are forwarded to the default ComponentRegistry.
This makes it possible to have multiple registries with different settings in one projects, and makes sharing of component libraries possible.
\ No newline at end of file
diff --git a/dev/concepts/advanced/extensions/index.html b/dev/concepts/advanced/extensions/index.html
index a71d3c33..a05a715d 100644
--- a/dev/concepts/advanced/extensions/index.html
+++ b/dev/concepts/advanced/extensions/index.html
@@ -1,4 +1,4 @@
- Extensions - Django-Components Extensions
New in version 0.131
Django-components functionality can be extended with "extensions". Extensions allow for powerful customization and integrations. They can:
- Tap into lifecycle events, such as when a component is created, deleted, registered, or unregistered.
- Add new attributes and methods to the components under an extension-specific nested class.
- Define custom commands that can be executed via the Django management command interface.
Live examples¤
Install extensions¤
Extensions are configured in the Django settings under COMPONENTS.extensions.
Extensions can be set by either as an import string or by passing in a class:
# settings.py
+ Extensions - Django-Components Extensions
New in version 0.131
Django-components functionality can be extended with "extensions". Extensions allow for powerful customization and integrations. They can:
- Tap into lifecycle events, such as when a component is created, deleted, registered, or unregistered.
- Add new attributes and methods to the components under an extension-specific nested class.
- Define custom commands that can be executed via the Django management command interface.
Live examples¤
Install extensions¤
Extensions are configured in the Django settings under COMPONENTS.extensions.
Extensions can be set by either as an import string or by passing in a class:
# settings.py
class MyExtension(ComponentExtension):
name = "my_extension"
diff --git a/dev/concepts/advanced/hooks/index.html b/dev/concepts/advanced/hooks/index.html
index f0a4c184..13de5373 100644
--- a/dev/concepts/advanced/hooks/index.html
+++ b/dev/concepts/advanced/hooks/index.html
@@ -1,4 +1,4 @@
- Lifecycle hooks - Django-Components Lifecycle hooks
New in version 0.96
Intercept the rendering lifecycle with Component hooks.
Unlike the extension hooks, these are defined directly on the Component class.
Available hooks¤
on_render_before¤
def on_render_before(
+ Lifecycle hooks - Django-Components Lifecycle hooks
New in version 0.96
Intercept the rendering lifecycle with Component hooks.
Unlike the extension hooks, these are defined directly on the Component class.
Available hooks¤
on_render_before¤
def on_render_before(
self: Component,
context: Context,
template: Optional[Template],
diff --git a/dev/concepts/advanced/html_fragments/index.html b/dev/concepts/advanced/html_fragments/index.html
index 0ae982bc..772e964d 100644
--- a/dev/concepts/advanced/html_fragments/index.html
+++ b/dev/concepts/advanced/html_fragments/index.html
@@ -1,4 +1,4 @@
- HTML fragments - Django-Components HTML fragments
Django-components provides a seamless integration with HTML fragments with AJAX (HTML over the wire), whether you're using jQuery, HTMX, AlpineJS, vanilla JavaScript, or other.
If the fragment component has any JS or CSS, django-components will:
- Automatically load the associated JS and CSS
- Ensure that JS is loaded and executed only once even if the fragment is inserted multiple times
Info
What are HTML fragments and "HTML over the wire"?
It is one of the methods for updating the state in the browser UI upon user interaction.
How it works is that:
- User makes an action - clicks a button or submits a form
- The action causes a request to be made from the client to the server.
- Server processes the request (e.g. form submission), and responds with HTML of some part of the UI (e.g. a new entry in a table).
- A library like HTMX, AlpineJS, or custom function inserts the new HTML into the correct place.
Document and fragment strategies¤
Components support different "strategies" for rendering JS and CSS.
Two of them are used to enable HTML fragments - "document" and "fragment".
What's the difference?
Document strategy¤
Document strategy assumes that the rendered components will be embedded into the HTML of the initial page load. This means that:
- The JS and CSS is embedded into the HTML as
<script> and <style> tags (see Default JS / CSS locations) - Django-components injects a JS script for managing JS and CSS assets
A component is rendered as a "document" when:
- It is embedded inside a template as
{% component %} - It is rendered with
Component.render() or Component.render_to_response() with the deps_strategy kwarg set to "document" (default)
Example:
MyTable.render(
+ HTML fragments - Django-Components HTML fragments
Django-components provides a seamless integration with HTML fragments with AJAX (HTML over the wire), whether you're using jQuery, HTMX, AlpineJS, vanilla JavaScript, or other.
If the fragment component has any JS or CSS, django-components will:
- Automatically load the associated JS and CSS
- Ensure that JS is loaded and executed only once even if the fragment is inserted multiple times
Info
What are HTML fragments and "HTML over the wire"?
It is one of the methods for updating the state in the browser UI upon user interaction.
How it works is that:
- User makes an action - clicks a button or submits a form
- The action causes a request to be made from the client to the server.
- Server processes the request (e.g. form submission), and responds with HTML of some part of the UI (e.g. a new entry in a table).
- A library like HTMX, AlpineJS, or custom function inserts the new HTML into the correct place.
Document and fragment strategies¤
Components support different "strategies" for rendering JS and CSS.
Two of them are used to enable HTML fragments - "document" and "fragment".
What's the difference?
Document strategy¤
Document strategy assumes that the rendered components will be embedded into the HTML of the initial page load. This means that:
- The JS and CSS is embedded into the HTML as
<script> and <style> tags (see Default JS / CSS locations) - Django-components injects a JS script for managing JS and CSS assets
A component is rendered as a "document" when:
- It is embedded inside a template as
{% component %} - It is rendered with
Component.render() or Component.render_to_response() with the deps_strategy kwarg set to "document" (default)
Example:
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/advanced/provide_inject/index.html b/dev/concepts/advanced/provide_inject/index.html
index cc11855d..0384e22e 100644
--- a/dev/concepts/advanced/provide_inject/index.html
+++ b/dev/concepts/advanced/provide_inject/index.html
@@ -1,4 +1,4 @@
- Prop drilling and provide / inject - Django-Components Prop drilling and provide / inject
New in version 0.80:
django-components supports the provide / inject pattern, similarly to React's Context Providers or Vue's provide / inject.
This is achieved with the combination of:
{% provide %} tagComponent.inject() method
What is "prop drilling"¤
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.
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.
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.
A neat solution to avoid prop drilling is using the "provide and inject" technique.
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.
This feature is inspired by Vue's Provide / Inject and React's Context / useContext.
As the name suggest, using provide / inject consists of 2 steps
- Providing data
- Injecting provided data
For examples of advanced uses of provide / inject, see this discussion.
Providing data¤
First we use the {% provide %} tag to define the data we want to "provide" (make available).
{% provide "my_data" hello="hi" another=123 %}
+ Prop drilling and provide / inject - Django-Components Prop drilling and provide / inject
New in version 0.80:
django-components supports the provide / inject pattern, similarly to React's Context Providers or Vue's provide / inject.
This is achieved with the combination of:
{% provide %} tagComponent.inject() method
What is "prop drilling"¤
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.
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.
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.
A neat solution to avoid prop drilling is using the "provide and inject" technique.
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.
This feature is inspired by Vue's Provide / Inject and React's Context / useContext.
As the name suggest, using provide / inject consists of 2 steps
- Providing data
- Injecting provided data
For examples of advanced uses of provide / inject, see this discussion.
Providing data¤
First we use the {% provide %} tag to define the data we want to "provide" (make available).
{% provide "my_data" hello="hi" another=123 %}
{% component "child" / %} <--- Can access "my_data"
{% endprovide %}
@@ -39,4 +39,4 @@
"""
renders:
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/advanced/rendering_js_css/index.html b/dev/concepts/advanced/rendering_js_css/index.html
index 56a7b254..1542d404 100644
--- a/dev/concepts/advanced/rendering_js_css/index.html
+++ b/dev/concepts/advanced/rendering_js_css/index.html
@@ -1,4 +1,4 @@
- Rendering JS / CSS - Django-Components Rendering JS / CSS
Introduction¤
Components consist of 3 parts - HTML, JS and CSS.
Handling of HTML is straightforward - it is rendered as is, and inserted where the {% component %} tag is.
However, handling of JS and CSS is more complex:
- JS and CSS is are inserted elsewhere in the HTML. As a best practice, JS is placed in the
<body> HTML tag, and CSS in the <head>. - Multiple components may use the same JS and CSS files. We don't want to load the same files multiple times.
- Fetching of JS and CSS may block the page, so the JS / CSS should be embedded in the HTML.
- Components inserted as HTML fragments need different handling for JS and CSS.
Default JS / CSS locations¤
If your components use JS and CSS then, by default, the JS and CSS will be automatically inserted into the HTML:
- CSS styles will be inserted at the end of the
<head> - JS scripts will be inserted at the end of the
<body>
If you want to place the dependencies elsewhere in the HTML, you can override the locations by inserting following Django template tags:
{% component_js_dependencies %} - Set new location(s) for JS scripts{% component_css_dependencies %} - Set new location(s) for CSS styles
So if you have a component with JS and CSS:
from django_components import Component, types
+ Rendering JS / CSS - Django-Components Rendering JS / CSS
Introduction¤
Components consist of 3 parts - HTML, JS and CSS.
Handling of HTML is straightforward - it is rendered as is, and inserted where the {% component %} tag is.
However, handling of JS and CSS is more complex:
- JS and CSS is are inserted elsewhere in the HTML. As a best practice, JS is placed in the
<body> HTML tag, and CSS in the <head>. - Multiple components may use the same JS and CSS files. We don't want to load the same files multiple times.
- Fetching of JS and CSS may block the page, so the JS / CSS should be embedded in the HTML.
- Components inserted as HTML fragments need different handling for JS and CSS.
Default JS / CSS locations¤
If your components use JS and CSS then, by default, the JS and CSS will be automatically inserted into the HTML:
- CSS styles will be inserted at the end of the
<head> - JS scripts will be inserted at the end of the
<body>
If you want to place the dependencies elsewhere in the HTML, you can override the locations by inserting following Django template tags:
{% component_js_dependencies %} - Set new location(s) for JS scripts{% component_css_dependencies %} - Set new location(s) for CSS styles
So if you have a component with JS and CSS:
from django_components import Component, types
class MyButton(Component):
template: types.django_html = """
@@ -106,4 +106,4 @@
html2 = MyComponent.render(deps_strategy="document")
assert html == html2
-
HTML fragments¤
Django-components provides a seamless integration with HTML fragments with AJAX (HTML over the wire), whether you're using jQuery, HTMX, AlpineJS, vanilla JavaScript, or other.
This is achieved by the combination of the "document" and "fragment" strategies.
Read more about HTML fragments.
\ No newline at end of file
+
HTML fragments¤
Django-components provides a seamless integration with HTML fragments with AJAX (HTML over the wire), whether you're using jQuery, HTMX, AlpineJS, vanilla JavaScript, or other.
This is achieved by the combination of the "document" and "fragment" strategies.
Read more about HTML fragments.
\ No newline at end of file
diff --git a/dev/concepts/advanced/tag_formatters/index.html b/dev/concepts/advanced/tag_formatters/index.html
index 986df2a8..c8edc122 100644
--- a/dev/concepts/advanced/tag_formatters/index.html
+++ b/dev/concepts/advanced/tag_formatters/index.html
@@ -1,4 +1,4 @@
- Tag formatters - Django-Components Tag formatters
Customizing component tags with TagFormatter¤
New in version 0.89
By default, components are rendered using the pair of {% component %} / {% endcomponent %} template tags:
{% component "button" href="..." disabled %}
+ Tag formatters - Django-Components Tag formatters
Customizing component tags with TagFormatter¤
New in version 0.89
By default, components are rendered using the pair of {% component %} / {% endcomponent %} template tags:
{% component "button" href="..." disabled %}
Click me!
{% endcomponent %}
diff --git a/dev/concepts/advanced/template_tags/index.html b/dev/concepts/advanced/template_tags/index.html
index b3cb8ccc..012db881 100644
--- a/dev/concepts/advanced/template_tags/index.html
+++ b/dev/concepts/advanced/template_tags/index.html
@@ -1,4 +1,4 @@
- Custom template tags - Django-Components Custom template tags
Template tags introduced by django-components, such as {% component %} and {% slot %}, offer additional features over the default Django template tags:
django-components/django-components Custom template tags
Template tags introduced by django-components, such as {% component %} and {% slot %}, offer additional features over the default Django template tags:
- Self-closing tags
{% mytag / %} - Allowing the use of
:, - (and more) in keys - Spread operator
... - Using template tags as inputs to other template tags
- Flat definition of dictionaries
attr:key=val - Function-like input validation
You too can easily create custom template tags that use the above features.
Defining template tags with @template_tag¤
The simplest way to create a custom template tag is using the template_tag decorator. This decorator allows you to define a template tag by just writing a function that returns the rendered content.
from django.template import Context, Library
diff --git a/dev/concepts/advanced/testing/index.html b/dev/concepts/advanced/testing/index.html
index df56d33b..0e2ed78a 100644
--- a/dev/concepts/advanced/testing/index.html
+++ b/dev/concepts/advanced/testing/index.html
@@ -1,4 +1,4 @@
- Testing - Django-Components Testing
New in version 0.131
The @djc_test decorator is a powerful tool for testing components created with django-components. It ensures that each test is properly isolated, preventing components registered in one test from affecting others.
Usage¤
The @djc_test decorator can be applied to functions, methods, or classes.
When applied to a class, it decorates all methods starting with test_, and all nested classes starting with Test, recursively.
Applying to a Function¤
To apply djc_test to a function, simply decorate the function as shown below:
import django
+ Testing - Django-Components Testing
New in version 0.131
The @djc_test decorator is a powerful tool for testing components created with django-components. It ensures that each test is properly isolated, preventing components registered in one test from affecting others.
Usage¤
The @djc_test decorator can be applied to functions, methods, or classes.
When applied to a class, it decorates all methods starting with test_, and all nested classes starting with Test, recursively.
Applying to a Function¤
To apply djc_test to a function, simply decorate the function as shown below:
import django
from django_components.testing import djc_test
@djc_test
diff --git a/dev/concepts/fundamentals/autodiscovery/index.html b/dev/concepts/fundamentals/autodiscovery/index.html
index 9e714fad..5287c774 100644
--- a/dev/concepts/fundamentals/autodiscovery/index.html
+++ b/dev/concepts/fundamentals/autodiscovery/index.html
@@ -1,4 +1,4 @@
- Autodiscovery - Django-Components Autodiscovery
django-components automatically searches for files containing components in the COMPONENTS.dirs and COMPONENTS.app_dirs directories.
Manually register components¤
Every component that you want to use in the template with the {% component %} tag needs to be registered with the ComponentRegistry.
We use the @register decorator for that:
from django_components import Component, register
+ Autodiscovery - Django-Components Autodiscovery
django-components automatically searches for files containing components in the COMPONENTS.dirs and COMPONENTS.app_dirs directories.
Manually register components¤
Every component that you want to use in the template with the {% component %} tag needs to be registered with the ComponentRegistry.
We use the @register decorator for that:
from django_components import Component, register
@register("calendar")
class Calendar(Component):
diff --git a/dev/concepts/fundamentals/component_defaults/index.html b/dev/concepts/fundamentals/component_defaults/index.html
index c6fc4d08..a322350c 100644
--- a/dev/concepts/fundamentals/component_defaults/index.html
+++ b/dev/concepts/fundamentals/component_defaults/index.html
@@ -1,4 +1,4 @@
- Component defaults - Django-Components Component defaults
When a component is being rendered, the component inputs are passed to various methods like get_template_data(), get_js_data(), or get_css_data().
It can be cumbersome to specify default values for each input in each method.
To make things easier, Components can specify their defaults. Defaults are used when no value is provided, or when the value is set to None for a particular input.
Defining defaults¤
To define defaults for a component, you create a nested Defaults class within your Component class. Each attribute in the Defaults class represents a default value for a corresponding input.
from django_components import Component, Default, register
+ Component defaults - Django-Components Component defaults
When a component is being rendered, the component inputs are passed to various methods like get_template_data(), get_js_data(), or get_css_data().
It can be cumbersome to specify default values for each input in each method.
To make things easier, Components can specify their defaults. Defaults are used when no value is provided, or when the value is set to None for a particular input.
Defining defaults¤
To define defaults for a component, you create a nested Defaults class within your Component class. Each attribute in the Defaults class represents a default value for a corresponding input.
from django_components import Component, Default, register
@register("my_table")
class MyTable(Component):
diff --git a/dev/concepts/fundamentals/component_views_urls/index.html b/dev/concepts/fundamentals/component_views_urls/index.html
index 2432f203..ee58209a 100644
--- a/dev/concepts/fundamentals/component_views_urls/index.html
+++ b/dev/concepts/fundamentals/component_views_urls/index.html
@@ -1,4 +1,4 @@
- Component views and URLs - Django-Components Component views and URLs
New in version 0.34
Note: Since 0.92, Component is no longer a subclass of Django's View. Instead, the nested Component.View class is a subclass of Django's View.
For web applications, it's common to define endpoints that serve HTML content (AKA views).
django-components has a suite of features that help you write and manage views and their URLs:
-
For each component, you can define methods for handling HTTP requests (GET, POST, etc.) - get(), post(), etc.
-
Use Component.as_view() to be able to use your Components with Django's urlpatterns. This works the same way as View.as_view().
-
To avoid having to manually define the endpoints for each component, you can set the component to be "public" with Component.View.public = True. This will automatically create a URL for the component. To retrieve the component URL, use get_component_url().
-
In addition, Component has a render_to_response() method that renders the component template based on the provided input and returns an HttpResponse object.
Define handlers¤
Here's an example of a calendar component defined as a view. Simply define a View class with your custom get() method to handle GET requests:
[project root]/components/calendar.pyfrom django_components import Component, ComponentView, register
+ Component views and URLs - Django-Components Component views and URLs
New in version 0.34
Note: Since 0.92, Component is no longer a subclass of Django's View. Instead, the nested Component.View class is a subclass of Django's View.
For web applications, it's common to define endpoints that serve HTML content (AKA views).
django-components has a suite of features that help you write and manage views and their URLs:
-
For each component, you can define methods for handling HTTP requests (GET, POST, etc.) - get(), post(), etc.
-
Use Component.as_view() to be able to use your Components with Django's urlpatterns. This works the same way as View.as_view().
-
To avoid having to manually define the endpoints for each component, you can set the component to be "public" with Component.View.public = True. This will automatically create a URL for the component. To retrieve the component URL, use get_component_url().
-
In addition, Component has a render_to_response() method that renders the component template based on the provided input and returns an HttpResponse object.
Define handlers¤
Here's an example of a calendar component defined as a view. Simply define a View class with your custom get() method to handle GET requests:
[project root]/components/calendar.pyfrom django_components import Component, ComponentView, register
@register("calendar")
class Calendar(Component):
diff --git a/dev/concepts/fundamentals/html_attributes/index.html b/dev/concepts/fundamentals/html_attributes/index.html
index c6f66ad1..6e56bf90 100644
--- a/dev/concepts/fundamentals/html_attributes/index.html
+++ b/dev/concepts/fundamentals/html_attributes/index.html
@@ -1,4 +1,4 @@
- HTML attributes - Django-Components HTML attributes
New in version 0.74:
You can use the {% html_attrs %} tag to render various data as key="value" HTML attributes.
{% html_attrs %} tag is versatile, allowing you to define HTML attributes however you need:
- Define attributes within the HTML template
- Define attributes in Python code
- Merge attributes from multiple sources
- Boolean attributes
- Append attributes
- Remove attributes
- Define default attributes
From v0.135 onwards, {% html_attrs %} tag also supports merging style and class attributes the same way how Vue does.
To get started, let's consider a simple example. If you have a template:
<div class="{{ classes }}" data-id="{{ my_id }}">
+ HTML attributes - Django-Components HTML attributes
New in version 0.74:
You can use the {% html_attrs %} tag to render various data as key="value" HTML attributes.
{% html_attrs %} tag is versatile, allowing you to define HTML attributes however you need:
- Define attributes within the HTML template
- Define attributes in Python code
- Merge attributes from multiple sources
- Boolean attributes
- Append attributes
- Remove attributes
- Define default attributes
From v0.135 onwards, {% html_attrs %} tag also supports merging style and class attributes the same way how Vue does.
To get started, let's consider a simple example. If you have a template:
You can rewrite it with the {% html_attrs %} tag:
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/html_js_css_files/index.html b/dev/concepts/fundamentals/html_js_css_files/index.html
index fb4084ce..a69c33c4 100644
--- a/dev/concepts/fundamentals/html_js_css_files/index.html
+++ b/dev/concepts/fundamentals/html_js_css_files/index.html
@@ -1,4 +1,4 @@
- HTML / JS / CSS files - Django-Components HTML / JS / CSS files
Overview¤
Each component can have single "primary" HTML, CSS and JS file associated with them.
Each of these can be either defined inline, or in a separate file:
- HTML files are defined using
Component.template or Component.template_file - CSS files are defined using
Component.css or Component.css_file - JS files are defined using
Component.js or Component.js_file
@register("calendar")
+ HTML / JS / CSS files - Django-Components HTML / JS / CSS files
Overview¤
Each component can have single "primary" HTML, CSS and JS file associated with them.
Each of these can be either defined inline, or in a separate file:
- HTML files are defined using
Component.template or Component.template_file - CSS files are defined using
Component.css or Component.css_file - JS files are defined using
Component.js or Component.js_file
@register("calendar")
class Calendar(Component):
template_file = "calendar.html"
css_file = "calendar.css"
diff --git a/dev/concepts/fundamentals/html_js_css_variables/index.html b/dev/concepts/fundamentals/html_js_css_variables/index.html
index 7505d84d..0d874651 100644
--- a/dev/concepts/fundamentals/html_js_css_variables/index.html
+++ b/dev/concepts/fundamentals/html_js_css_variables/index.html
@@ -1,4 +1,4 @@
- HTML / JS / CSS variables - Django-Components HTML / JS / CSS variables
When a component recieves input through {% component %} tag, or the Component.render() or Component.render_to_response() methods, you can define how the input is handled, and what variables will be available to the template, JavaScript and CSS.
Overview¤
Django Components offers three key methods for passing variables to different parts of your component:
get_template_data() - Provides variables to your HTML templateget_js_data() - Provides variables to your JavaScript codeget_css_data() - Provides variables to your CSS styles
These methods let you pre-process inputs before they're used in rendering.
Each method handles the data independently - you can define different data for the template, JS, and CSS.
class ProfileCard(Component):
+ HTML / JS / CSS variables - Django-Components HTML / JS / CSS variables
When a component recieves input through {% component %} tag, or the Component.render() or Component.render_to_response() methods, you can define how the input is handled, and what variables will be available to the template, JavaScript and CSS.
Overview¤
Django Components offers three key methods for passing variables to different parts of your component:
get_template_data() - Provides variables to your HTML templateget_js_data() - Provides variables to your JavaScript codeget_css_data() - Provides variables to your CSS styles
These methods let you pre-process inputs before they're used in rendering.
Each method handles the data independently - you can define different data for the template, JS, and CSS.
class ProfileCard(Component):
class Kwargs(NamedTuple):
user_id: int
show_details: bool
diff --git a/dev/concepts/fundamentals/http_request/index.html b/dev/concepts/fundamentals/http_request/index.html
index 5bfbf642..e164bb42 100644
--- a/dev/concepts/fundamentals/http_request/index.html
+++ b/dev/concepts/fundamentals/http_request/index.html
@@ -1,4 +1,4 @@
- HTTP Request - Django-Components HTTP Request
The most common use of django-components is to render HTML when the server receives a request. As such, there are a few features that are dependent on the request object.
Passing the HttpRequest object¤
In regular Django templates, the request object is available only within the RequestContext.
In Components, you can either use RequestContext, or pass the request object explicitly to Component.render() and Component.render_to_response().
So the request object is available to components either when:
- The component is rendered with
RequestContext (Regular Django behavior) - The component is rendered with a regular
Context (or none), but you set the request kwarg of Component.render(). - The component is nested and the parent has access to the request object.
# ✅ With request
+ HTTP Request - Django-Components HTTP Request
The most common use of django-components is to render HTML when the server receives a request. As such, there are a few features that are dependent on the request object.
Passing the HttpRequest object¤
In regular Django templates, the request object is available only within the RequestContext.
In Components, you can either use RequestContext, or pass the request object explicitly to Component.render() and Component.render_to_response().
So the request object is available to components either when:
- The component is rendered with
RequestContext (Regular Django behavior) - The component is rendered with a regular
Context (or none), but you set the request kwarg of Component.render(). - The component is nested and the parent has access to the request object.
# ✅ With request
MyComponent.render(request=request)
MyComponent.render(context=RequestContext(request, {}))
@@ -35,4 +35,4 @@
return {
'csrf_token': csrf_token,
}
-
This is a dictionary with the context processors data.
If the request object is not available, then self.context_processors_data will be an empty dictionary.
Warning
The self.context_processors_data object is generated dynamically, so changes to it are not persisted.
\ No newline at end of file
+
This is a dictionary with the context processors data.
If the request object is not available, then self.context_processors_data will be an empty dictionary.
Warning
The self.context_processors_data object is generated dynamically, so changes to it are not persisted.
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/render_api/index.html b/dev/concepts/fundamentals/render_api/index.html
index 6ef22377..424260f3 100644
--- a/dev/concepts/fundamentals/render_api/index.html
+++ b/dev/concepts/fundamentals/render_api/index.html
@@ -1,4 +1,4 @@
- Render API - Django-Components Render API
When a component is being rendered, whether with Component.render() or {% component %}, a component instance is populated with the current inputs and context. This allows you to access things like component inputs.
We refer to these render-time-only methods and attributes as the "Render API".
Render API is available inside these Component methods:
get_template_data()get_js_data()get_css_data()get_context_data()on_render_before()on_render()on_render_after()
Example:
class Table(Component):
+ Render API - Django-Components Render API
When a component is being rendered, whether with Component.render() or {% component %}, a component instance is populated with the current inputs and context. This allows you to access things like component inputs.
We refer to these render-time-only methods and attributes as the "Render API".
Render API is available inside these Component methods:
get_template_data()get_js_data()get_css_data()get_context_data()on_render_before()on_render()on_render_after()
Example:
class Table(Component):
def on_render_before(self, context, template):
# Access component's ID
assert self.id == "c1A2b3c"
diff --git a/dev/concepts/fundamentals/rendering_components/index.html b/dev/concepts/fundamentals/rendering_components/index.html
index 3088cc3d..7969c3d5 100644
--- a/dev/concepts/fundamentals/rendering_components/index.html
+++ b/dev/concepts/fundamentals/rendering_components/index.html
@@ -1,4 +1,4 @@
- Rendering components - Django-Components Rendering components
Your components can be rendered either within your Django templates, or directly in Python code.
Overview¤
Django Components provides three main methods to render components:
{% component %} tag - Renders the component within your Django templatesComponent.render() method - Renders the component to a stringComponent.render_to_response() method - Renders the component and wraps it in an HTTP response
{% component %} tag¤
Use the {% component %} tag to render a component within your Django templates.
The {% component %} tag takes:
- Component's registered name as the first positional argument,
- Followed by any number of positional and keyword arguments.
{% load component_tags %}
+ Rendering components - Django-Components Rendering components
Your components can be rendered either within your Django templates, or directly in Python code.
Overview¤
Django Components provides three main methods to render components:
{% component %} tag - Renders the component within your Django templatesComponent.render() method - Renders the component to a stringComponent.render_to_response() method - Renders the component and wraps it in an HTTP response
{% component %} tag¤
Use the {% component %} tag to render a component within your Django templates.
The {% component %} tag takes:
- Component's registered name as the first positional argument,
- Followed by any number of positional and keyword arguments.
{% load component_tags %}
<div>
{% component "button" name="John" job="Developer" / %}
</div>
diff --git a/dev/concepts/fundamentals/secondary_js_css_files/index.html b/dev/concepts/fundamentals/secondary_js_css_files/index.html
index 485559f1..1fce6e1f 100644
--- a/dev/concepts/fundamentals/secondary_js_css_files/index.html
+++ b/dev/concepts/fundamentals/secondary_js_css_files/index.html
@@ -1,4 +1,4 @@
- Secondary JS / CSS files - Django-Components Secondary JS / CSS files
Overview¤
Each component can define extra or "secondary" CSS / JS files using the nested Component.Media class, by setting Component.Media.js and Component.Media.css.
The main HTML / JS / CSS files are limited to 1 per component. This is not the case for the secondary files, where components can have many of them.
There is also no special behavior or post-processing for these secondary files, they are loaded as is.
You can use these for third-party libraries, or for shared CSS / JS files.
These must be set as paths, URLs, or custom objects.
@register("calendar")
+ Secondary JS / CSS files - Django-Components Secondary JS / CSS files
Overview¤
Each component can define extra or "secondary" CSS / JS files using the nested Component.Media class, by setting Component.Media.js and Component.Media.css.
The main HTML / JS / CSS files are limited to 1 per component. This is not the case for the secondary files, where components can have many of them.
There is also no special behavior or post-processing for these secondary files, they are loaded as is.
You can use these for third-party libraries, or for shared CSS / JS files.
These must be set as paths, URLs, or custom objects.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/single_file_components/index.html b/dev/concepts/fundamentals/single_file_components/index.html
index 77ce7faf..b951c79d 100644
--- a/dev/concepts/fundamentals/single_file_components/index.html
+++ b/dev/concepts/fundamentals/single_file_components/index.html
@@ -1,4 +1,4 @@
- Single-file components - Django-Components Single-file components
Components can be defined in a single file, inlining the HTML, JS and CSS within the Python code.
Writing single file components¤
To do this, you can use the template, js, and css class attributes instead of the template_file, js_file, and css_file.
For example, here's the calendar component from the Getting started tutorial:
calendar.pyfrom django_components import Component
+ Single-file components - Django-Components Single-file components
Components can be defined in a single file, inlining the HTML, JS and CSS within the Python code.
Writing single file components¤
To do this, you can use the template, js, and css class attributes instead of the template_file, js_file, and css_file.
For example, here's the calendar component from the Getting started tutorial:
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/slots/index.html b/dev/concepts/fundamentals/slots/index.html
index 3d945271..03e24c01 100644
--- a/dev/concepts/fundamentals/slots/index.html
+++ b/dev/concepts/fundamentals/slots/index.html
@@ -1,4 +1,4 @@
- Slots - Django-Components Slots
django-components has the most extensive slot system of all the popular Python templating engines.
The slot system is based on Vue, and works across both Django templates and Python code.
What are slots?¤
Components support something called 'slots'.
When you write a component, you define its template. The template will always be the same each time you render the component.
However, sometimes you may want to customize the component slightly to change the content of the component. This is where slots come in.
Slots allow you to insert parts of HTML into the component. This makes components more reusable and composable.
<div class="calendar-component">
+ Slots - Django-Components Slots
django-components has the most extensive slot system of all the popular Python templating engines.
The slot system is based on Vue, and works across both Django templates and Python code.
What are slots?¤
Components support something called 'slots'.
When you write a component, you define its template. The template will always be the same each time you render the component.
However, sometimes you may want to customize the component slightly to change the content of the component. This is where slots come in.
Slots allow you to insert parts of HTML into the component. This makes components more reusable and composable.
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/subclassing_components/index.html b/dev/concepts/fundamentals/subclassing_components/index.html
index 6a374f11..b09d209a 100644
--- a/dev/concepts/fundamentals/subclassing_components/index.html
+++ b/dev/concepts/fundamentals/subclassing_components/index.html
@@ -1,4 +1,4 @@
- Subclassing components - Django-Components Subclassing components
In larger projects, you might need to write multiple components with similar behavior. In such cases, you can extract shared behavior into a standalone component class to keep things DRY.
When subclassing a component, there's a couple of things to keep in mind:
Template, JS, and CSS inheritance¤
When it comes to the pairs:
Component.template/Component.template_fileComponent.js/Component.js_fileComponent.css/Component.css_file
inheritance follows these rules:
- If a child component class defines either member of a pair (e.g., either
template or template_file), it takes precedence and the parent's definition is ignored completely. - For example, if a child component defines
template_file, the parent's template or template_file will be ignored. - This applies independently to each pair - you can inherit the JS while overriding the template, for instance.
For example:
class BaseCard(Component):
+ Subclassing components - Django-Components Subclassing components
In larger projects, you might need to write multiple components with similar behavior. In such cases, you can extract shared behavior into a standalone component class to keep things DRY.
When subclassing a component, there's a couple of things to keep in mind:
Template, JS, and CSS inheritance¤
When it comes to the pairs:
Component.template/Component.template_fileComponent.js/Component.js_fileComponent.css/Component.css_file
inheritance follows these rules:
- If a child component class defines either member of a pair (e.g., either
template or template_file), it takes precedence and the parent's definition is ignored completely. - For example, if a child component defines
template_file, the parent's template or template_file will be ignored. - This applies independently to each pair - you can inherit the JS while overriding the template, for instance.
For example:
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/template_tag_syntax/index.html b/dev/concepts/fundamentals/template_tag_syntax/index.html
index e9377ca3..4f7f2f90 100644
--- a/dev/concepts/fundamentals/template_tag_syntax/index.html
+++ b/dev/concepts/fundamentals/template_tag_syntax/index.html
@@ -1,4 +1,4 @@
- Template tag syntax - Django-Components Template tag syntax
All template tags in django_component, like {% component %} or {% slot %}, and so on, support extra syntax that makes it possible to write components like in Vue or React (JSX).
Self-closing tags¤
When you have a tag like {% component %} or {% slot %}, but it has no content, you can simply append a forward slash / at the end, instead of writing out the closing tags like {% endcomponent %} or {% endslot %}:
So this:
{% component "button" %}{% endcomponent %}
+ Template tag syntax - Django-Components Template tag syntax
All template tags in django_component, like {% component %} or {% slot %}, and so on, support extra syntax that makes it possible to write components like in Vue or React (JSX).
Self-closing tags¤
When you have a tag like {% component %} or {% slot %}, but it has no content, you can simply append a forward slash / at the end, instead of writing out the closing tags like {% endcomponent %} or {% endslot %}:
So this:
becomes
Special characters¤
New in version 0.71:
Keyword arguments can contain special characters # @ . - _, so keywords like so are still valid:
<body>
{% component "calendar" my-date="2015-06-19" @click.native=do_something #some_id=True / %}
@@ -82,4 +82,4 @@
date_last_active="2024-09-03"
...
%}
-
Much better!
To disable this behavior, set COMPONENTS.multiline_tag to False
\ No newline at end of file
+
Much better!
To disable this behavior, set COMPONENTS.multiline_tag to False
\ No newline at end of file
diff --git a/dev/concepts/fundamentals/typing_and_validation/index.html b/dev/concepts/fundamentals/typing_and_validation/index.html
index b18dcb18..36bc01fa 100644
--- a/dev/concepts/fundamentals/typing_and_validation/index.html
+++ b/dev/concepts/fundamentals/typing_and_validation/index.html
@@ -1,4 +1,4 @@
- Typing and validation - Django-Components Typing and validation
Typing overview¤
Warning
In versions 0.92 to 0.139 (inclusive), the component typing was specified through generics.
Since v0.140, the types must be specified as class attributes of the Component class - Args, Kwargs, Slots, TemplateData, JsData, and CssData.
See Migrating from generics to class attributes for more info.
Warning
Input validation was NOT part of Django Components between versions 0.136 and 0.139 (inclusive).
The Component class optionally accepts class attributes that allow you to define the types of args, kwargs, slots, as well as the data returned from the data methods.
Use this to add type hints to your components, to validate the inputs at runtime, and to document them.
from typing import NamedTuple, Optional
+ Typing and validation - Django-Components Typing and validation
Typing overview¤
Warning
In versions 0.92 to 0.139 (inclusive), the component typing was specified through generics.
Since v0.140, the types must be specified as class attributes of the Component class - Args, Kwargs, Slots, TemplateData, JsData, and CssData.
See Migrating from generics to class attributes for more info.
Warning
Input validation was NOT part of Django Components between versions 0.136 and 0.139 (inclusive).
The Component class optionally accepts class attributes that allow you to define the types of args, kwargs, slots, as well as the data returned from the data methods.
Use this to add type hints to your components, to validate the inputs at runtime, and to document them.
from typing import NamedTuple, Optional
from django.template import Context
from django_components import Component, SlotInput
diff --git a/dev/getting_started/adding_js_and_css/index.html b/dev/getting_started/adding_js_and_css/index.html
index 47f51a8f..f774ab58 100644
--- a/dev/getting_started/adding_js_and_css/index.html
+++ b/dev/getting_started/adding_js_and_css/index.html
@@ -1,4 +1,4 @@
- Adding JS and CSS - Django-Components Adding JS and CSS
Next we will add CSS and JavaScript to our template.
Info
In django-components, using JS and CSS is as simple as defining them on the Component class. You don't have to insert the <script> and <link> tags into the HTML manually.
Behind the scenes, django-components keeps track of which components use which JS and CSS files. Thus, when a component is rendered on the page, the page will contain only the JS and CSS used by the components, and nothing more!
1. Update project structure¤
Start by creating empty calendar.js and calendar.css files:
sampleproject/
+ Adding JS and CSS - Django-Components Adding JS and CSS
Next we will add CSS and JavaScript to our template.
Info
In django-components, using JS and CSS is as simple as defining them on the Component class. You don't have to insert the <script> and <link> tags into the HTML manually.
Behind the scenes, django-components keeps track of which components use which JS and CSS files. Thus, when a component is rendered on the page, the page will contain only the JS and CSS used by the components, and nothing more!
1. Update project structure¤
Start by creating empty calendar.js and calendar.css files:
sampleproject/
├── calendarapp/
├── components/
│ └── calendar/
@@ -172,4 +172,4 @@
</script>
</body>
</html>
-
Now that we have a fully-defined component, next let's use it in a Django template ➡️.
\ No newline at end of file
+
Now that we have a fully-defined component, next let's use it in a Django template ➡️.
\ No newline at end of file
diff --git a/dev/getting_started/adding_slots/index.html b/dev/getting_started/adding_slots/index.html
index 7a134a8b..c91e680d 100644
--- a/dev/getting_started/adding_slots/index.html
+++ b/dev/getting_started/adding_slots/index.html
@@ -1,4 +1,4 @@
- Adding slots - Django-Components Adding slots
Our calendar component's looking great! But we just got a new assignment from our colleague - The calendar date needs to be shown on 3 different pages:
- On one page, it needs to be shown as is
- On the second, the date needs to be bold
- On the third, the date needs to be in italics
As a reminder, this is what the component's template looks like:
<div class="calendar">
+ Adding slots - Django-Components Adding slots
Our calendar component's looking great! But we just got a new assignment from our colleague - The calendar date needs to be shown on 3 different pages:
- On one page, it needs to be shown as is
- On the second, the date needs to be bold
- On the third, the date needs to be in italics
As a reminder, this is what the component's template looks like:
There's many ways we could approach this:
- Expose the date in a slot
- Style
.calendar > span differently on different pages - Pass a variable to the component that decides how the date is rendered
- Create a new component
First two options are more flexible, because the custom styling is not baked into a component's implementation. And for the sake of demonstration, we'll solve this challenge with slots.
1. What are slots¤
Components support something called Slots.
When a component is used inside another template, slots allow the parent template to override specific parts of the child component by passing in different content.
This mechanism makes components more reusable and composable.
This behavior is similar to slots in Vue.
In the example below we introduce two tags that work hand in hand to make this work. These are...
{% slot <name> %}/{% endslot %}: Declares a new slot in the component template.{% fill <name> %}/{% endfill %}: (Used inside a {% component %} tag pair.) Fills a declared slot with the specified content.
2. Add a slot tag¤
Let's update our calendar component to support more customization. We'll add {% slot %} tag to the template:
<div class="calendar">
@@ -117,4 +117,4 @@
<div class="calendar">
Today's date is <i>2024-12-16</i>
</div>
-
Info
When to use slots vs variables?
Generally, slots are more flexible - you can access the slot data, even the original slot content. Thus, slots behave more like functions that render content based on their context.
On the other hand, variables are simpler - the variable you pass to a component is what will be used.
Moreover, slots are treated as part of the template - for example the CSS scoping (work in progress) is applied to the slot content too.
\ No newline at end of file
+
Info
When to use slots vs variables?
Generally, slots are more flexible - you can access the slot data, even the original slot content. Thus, slots behave more like functions that render content based on their context.
On the other hand, variables are simpler - the variable you pass to a component is what will be used.
Moreover, slots are treated as part of the template - for example the CSS scoping (work in progress) is applied to the slot content too.
\ No newline at end of file
diff --git a/dev/getting_started/components_in_templates/index.html b/dev/getting_started/components_in_templates/index.html
index 7e32d0cc..55181fb1 100644
--- a/dev/getting_started/components_in_templates/index.html
+++ b/dev/getting_started/components_in_templates/index.html
@@ -1,4 +1,4 @@
- Components in templates - Django-Components Components in templates
By the end of this section, we want to be able to use our components in Django templates like so:
{% load component_tags %}
+ Components in templates - Django-Components Components in templates
By the end of this section, we want to be able to use our components in Django templates like so:
You can now render the components in templates!
Currently our component always renders the same content. Let's parametrise it, so that our Calendar component is configurable from within the template ➡️
\ No newline at end of file
+ You can now render the components in templates!
Currently our component always renders the same content. Let's parametrise it, so that our Calendar component is configurable from within the template ➡️
\ No newline at end of file
diff --git a/dev/getting_started/parametrising_components/index.html b/dev/getting_started/parametrising_components/index.html
index 1eefbf26..b8ffbb78 100644
--- a/dev/getting_started/parametrising_components/index.html
+++ b/dev/getting_started/parametrising_components/index.html
@@ -1,4 +1,4 @@
- Parametrising components - Django-Components Parametrising components
So far, our Calendar component will always render the date 1970-01-01. Let's make it more useful and flexible by being able to pass in custom date.
What we want is to be able to use the Calendar component within the template like so:
{% component "calendar" date="2024-12-13" extra_class="text-red" / %}
+ Parametrising components - Django-Components Parametrising components
So far, our Calendar component will always render the date 1970-01-01. Let's make it more useful and flexible by being able to pass in custom date.
What we want is to be able to use the Calendar component within the template like so:
1. Understading component inputs¤
In section Create your first component, we defined the get_template_data() method that defines what variables will be available within the template:
\ No newline at end of file
+
\ No newline at end of file
diff --git a/dev/getting_started/rendering_components/index.html b/dev/getting_started/rendering_components/index.html
index 177af26e..9457ce84 100644
--- a/dev/getting_started/rendering_components/index.html
+++ b/dev/getting_started/rendering_components/index.html
@@ -1,4 +1,4 @@
- Rendering components - Django-Components Rendering components
Our calendar component can accept and pre-process data, defines its own CSS and JS, and can be used in templates.
...But how do we actually render the components into HTML?
There's 3 ways to render a component:
- Render the template that contains the
{% component %} tag - Render the component directly with
Component.render() - Render the component directly with
Component.render_to_response()
As a reminder, this is what the calendar component looks like:
[project root]/components/calendar/calendar.pyfrom django_components import Component, register
+ Rendering components - Django-Components Rendering components
Our calendar component can accept and pre-process data, defines its own CSS and JS, and can be used in templates.
...But how do we actually render the components into HTML?
There's 3 ways to render a component:
- Render the template that contains the
{% component %} tag - Render the component directly with
Component.render() - Render the component directly with
Component.render_to_response()
As a reminder, this is what the calendar component looks like:
[project root]/components/calendar/calendar.pyfrom django_components import Component, register
@register("calendar")
class Calendar(Component):
diff --git a/dev/getting_started/your_first_component/index.html b/dev/getting_started/your_first_component/index.html
index 58d059db..1fcbb87e 100644
--- a/dev/getting_started/your_first_component/index.html
+++ b/dev/getting_started/your_first_component/index.html
@@ -1,4 +1,4 @@
- Create your first component - Django-Components Create your first component
A component in django-components can be as simple as a Django template and Python code to declare the component:
calendar.html<div class="calendar">
+ Create your first component - Django-Components
\ No newline at end of file
+
And voilá!! We've created our first component.
\ No newline at end of file
diff --git a/dev/guides/devguides/dependency_mgmt/index.html b/dev/guides/devguides/dependency_mgmt/index.html
index a89b99fb..40304889 100644
--- a/dev/guides/devguides/dependency_mgmt/index.html
+++ b/dev/guides/devguides/dependency_mgmt/index.html
@@ -1,4 +1,4 @@
- JS and CSS rendering - Django-Components