Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ar4s/django-htmx-components
WIP
https://github.com/ar4s/django-htmx-components
django-htmx django-package htmx
Last synced: about 1 month ago
JSON representation
WIP
- Host: GitHub
- URL: https://github.com/ar4s/django-htmx-components
- Owner: ar4s
- License: mit
- Created: 2023-07-21T18:55:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-03T18:22:17.000Z (over 1 year ago)
- Last Synced: 2024-05-21T07:55:52.775Z (8 months ago)
- Topics: django-htmx, django-package, htmx
- Language: Python
- Homepage:
- Size: 19.5 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# django-htmx-components
The package is in early development stage and is not ready for production use.
The package provides a set of components for Django that can be used to build dynamic web pages using [htmx](https://htmx.org/).
A main goal of the package is to provide a set of components that can be used to build a web page without writing any JavaScript code and provide an opionionated way to build dynamic web pages.
Each component is a simple Python function that returns a dictionary with data that can be used to render a component on a page.
# Usage
Add `django_htmx_components` to `INSTALLED_APPS` in your Django settings file.
```python
INSTALLED_APPS = [
...
"django_htmx_components",
...
]
```
Next add `htmx_components` to your `urls.py` file.
```python
from django.urls import include, path
from django_htmx_components import htmx_components
urlpatterns = [
...
path("", include(htmx_components.urls)),
...
]
```
Add `components.py` file to your app and register components in it.
```python
from django.http import HttpRequest
from django_htmx_components import ComponentContext, htmx_components
@htmx_components.register(scope="auth", name="login_button")
def login_button(request: HttpRequest, params):
return ComponentContext({"is_authenticated": request.user.is_authenticated})
```
`components.py` file is automatically imported by `django_htmx_components` app, so you don't need to import it anywhere else.
Render component in your regular template.
Next, you need to define template for your component.
```html
{% load i18n htmx_components_tags %}
{% if is_authenticated %}
{% translate "you are logged in!" %}
{% else %}
{% translate "login" %}
{% endif %}
```
And last but not least, you need to define template for your component.
```html
{% load i18n htmx_components_tags %}
{% htmx_component 'auth' 'login_button' %}
```
As you can see, the component is rendered using `htmx_component` template tag, so you can reuse other components inside your components.
That's it! You have a working component.
## Developer experience
For better developer experience, the package provides a "storybook" like page that can be used to see all components.
Check [example](http://localhost:8000/htmx/_scopes/auth/) to see how it looks like.
## TODO
- [ ] Add more examples
- [ ] Add tests
- [ ] Add documentation
- [ ] Add debug toolbar panel
- [ ] Add CSS to "storybook"