Write your components and register them with your instance of ComponentRegistry
There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of ComponentRegistry from the previous step.
For better user experience, you can also define the types for the args, kwargs, slots and data.
It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix my_ / My.
from typing import Dict, NotRequired, Optional, Tuple, TypedDict
-
-from django_components import Component, SlotContent, register, types
-
-from myapp.templatetags.mytags import comp_registry
-
-# Define the types
-class EmptyDict(TypedDict):
- pass
-
-type MyMenuArgs = Tuple[int, str]
-
-class MyMenuSlots(TypedDict):
- default: NotRequired[Optional[SlotContent[EmptyDict]]]
-
-class MyMenuProps(TypedDict):
- vertical: NotRequired[bool]
- klass: NotRequired[str]
- style: NotRequired[str]
-
-# Define the component
-# NOTE: Don't forget to set the `registry`!
-@register("my_menu", registry=comp_registry)
-class MyMenu(Component[MyMenuArgs, MyMenuProps, MyMenuSlots]):
- def get_context_data(
- self,
- *args,
- attrs: Optional[Dict] = None,
- ):
- return {
- "attrs": attrs,
- }
-
- template: types.django_html = """
- {# Load django_components template tags #}
- {% load component_tags %}
-
- <div {% html_attrs attrs class="my-menu" %}>
- <div class="my-menu__content">
- {% slot "default" default / %}
- </div>
- </div>
- """
+Write your components and register them with your instance of ComponentRegistry
There's one difference when you are writing components that are to be shared, and that's that the components must be explicitly registered with your instance of ComponentRegistry from the previous step.
For better user experience, you can also define the types for the args, kwargs, slots and data.
It's also a good idea to have a common prefix for your components, so they can be easily distinguished from users' components. In the example below, we use the prefix my_ / My.
from typing import NamedTuple, Optional
+from django_components import Component, SlotInput, register, types
+
+from myapp.templatetags.mytags import comp_registry
+
+# Define the component
+# NOTE: Don't forget to set the `registry`!
+@register("my_menu", registry=comp_registry)
+class MyMenu(Component):
+ # Define the types
+ class Args(NamedTuple):
+ size: int
+ text: str
+
+ class Kwargs(NamedTuple):
+ vertical: Optional[bool] = None
+ klass: Optional[str] = None
+ style: Optional[str] = None
+
+ class Slots(NamedTuple):
+ default: Optional[SlotInput] = None
+
+ def get_template_data(self, args: Args, kwargs: Kwargs, slots: Slots, context: Context):
+ attrs = ...
+ return {
+ "attrs": attrs,
+ }
+
+ template: types.django_html = """
+ {# Load django_components template tags #}
+ {% load component_tags %}
+
+ <div {% html_attrs attrs class="my-menu" %}>
+ <div class="my-menu__content">
+ {% slot "default" default / %}
+ </div>
+ </div>
+ """
Import the components in apps.py
Normally, users rely on autodiscovery and COMPONENTS.dirs to load the component files.
Since you, as the library author, are not in control of the file system, it is recommended to load the components manually.
We recommend doing this in the AppConfig.ready() hook of your apps.py:
And, at last, you can use the components in your own project!