component ¤
Component ¤
Component(
registered_name: Optional[str] = None,
component_id: Optional[str] = None,
outer_context: Optional[Context] = None,
fill_content: Optional[Dict[str, FillContent]] = None,
)
Bases: Generic[ArgsType, KwargsType, DataType, SlotsType]
Source code in src/django_components/component.py
Media class-attribute
instance-attribute
¤
Media = ComponentMediaInput
Defines JS and CSS media files associated with this component.
css class-attribute
instance-attribute
¤
Inlined CSS associated with this component.
input property
¤
input: Optional[RenderInput[ArgsType, KwargsType, SlotsType]]
Input holds the data (like arg, kwargs, slots) that were passsed to the current execution of the render
method.
js class-attribute
instance-attribute
¤
Inlined JS associated with this component.
media instance-attribute
¤
media: Media
Normalized definition of JS and CSS media files associated with this component.
NOTE: This field is generated from Component.Media class.
response_class class-attribute
instance-attribute
¤
response_class = HttpResponse
This allows to configure what class is used to generate response from render_to_response
template class-attribute
instance-attribute
¤
Inlined Django template associated with this component.
template_name class-attribute
¤
Relative filepath to the Django template associated with this component.
as_view classmethod
¤
as_view(**initkwargs: Any) -> ViewFn
Shortcut for calling Component.View.as_view
and passing component instance to it.
Source code in src/django_components/component.py
inject ¤
Use this method to retrieve the data that was passed to a {% provide %}
tag with the corresponding key.
To retrieve the data, inject()
must be called inside a component that's inside the {% provide %}
tag.
You may also pass a default that will be used if the provide
tag with given key was NOT found.
This method mut be used inside the get_context_data()
method and raises an error if called elsewhere.
Example:
Given this template:
{% provide "provider" hello="world" %}
{% component "my_comp" %}
{% endcomponent %}
{% endprovide %}
And given this definition of "my_comp" component:
from django_components import Component, register
@register("my_comp")
class MyComp(Component):
template = "hi {{ data.hello }}!"
def get_context_data(self):
data = self.inject("provider")
return {"data": data}
This renders into:
As the {{ data.hello }}
is taken from the "provider".
Source code in src/django_components/component.py
render classmethod
¤
render(
context: Optional[Union[Dict[str, Any], Context]] = None,
args: Optional[ArgsType] = None,
kwargs: Optional[KwargsType] = None,
slots: Optional[SlotsType] = None,
escape_slots_content: bool = True,
) -> str
Render the component into a string.
Inputs: - args
- Positional args for the component. This is the same as calling the component as {% component "my_comp" arg1 arg2 ... %}
- kwargs
- Kwargs for the component. This is the same as calling the component as {% component "my_comp" key1=val1 key2=val2 ... %}
- slots
- Component slot fills. This is the same as pasing {% fill %}
tags to the component. Accepts a dictionary of { slot_name: slot_content }
where slot_content
can be a string or render function. - escape_slots_content
- Whether the content from slots
should be escaped. - context
- A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs.
Example:
MyComponent.render(
args=[1, "two", {}],
kwargs={
"key": 123,
},
slots={
"header": 'STATIC TEXT HERE',
"footer": lambda ctx, slot_kwargs, slot_ref: f'CTX: {ctx['hello']} SLOT_DATA: {slot_kwargs['abc']}',
},
escape_slots_content=False,
)
Source code in src/django_components/component.py
render_css_dependencies ¤
render_css_dependencies() -> SafeString
Render only CSS dependencies available in the media class or provided as a string.
Source code in src/django_components/component.py
render_dependencies ¤
render_dependencies() -> SafeString
Helper function to render all dependencies for a component.
Source code in src/django_components/component.py
render_js_dependencies ¤
render_js_dependencies() -> SafeString
Render only JS dependencies available in the media class or provided as a string.
Source code in src/django_components/component.py
render_to_response classmethod
¤
render_to_response(
context: Optional[Union[Dict[str, Any], Context]] = None,
slots: Optional[SlotsType] = None,
escape_slots_content: bool = True,
args: Optional[ArgsType] = None,
kwargs: Optional[KwargsType] = None,
*response_args: Any,
**response_kwargs: Any
) -> HttpResponse
Render the component and wrap the content in the response class.
The response class is taken from Component.response_class
. Defaults to django.http.HttpResponse
.
This is the interface for the django.views.View
class which allows us to use components as Django views with component.as_view()
.
Inputs: - args
- Positional args for the component. This is the same as calling the component as {% component "my_comp" arg1 arg2 ... %}
- kwargs
- Kwargs for the component. This is the same as calling the component as {% component "my_comp" key1=val1 key2=val2 ... %}
- slots
- Component slot fills. This is the same as pasing {% fill %}
tags to the component. Accepts a dictionary of { slot_name: slot_content }
where slot_content
can be a string or render function. - escape_slots_content
- Whether the content from slots
should be escaped. - context
- A context (dictionary or Django's Context) within which the component is rendered. The keys on the context can be accessed from within the template. - NOTE: In "isolated" mode, context is NOT accessible, and data MUST be passed via component's args and kwargs.
Any additional args and kwargs are passed to the response_class
.
Example:
MyComponent.render_to_response(
args=[1, "two", {}],
kwargs={
"key": 123,
},
slots={
"header": 'STATIC TEXT HERE',
"footer": lambda ctx, slot_kwargs, slot_ref: f'CTX: {ctx['hello']} SLOT_DATA: {slot_kwargs['abc']}',
},
escape_slots_content=False,
# HttpResponse input
status=201,
headers={...},
)
# HttpResponse(content=..., status=201, headers=...)
Source code in src/django_components/component.py
ComponentNode ¤
ComponentNode(
name: str,
args: List[Expression],
kwargs: RuntimeKwargs,
isolated_context: bool = False,
fill_nodes: Optional[List[FillNode]] = None,
node_id: Optional[str] = None,
)
Bases: BaseNode
Django.template.Node subclass that renders a django-components component