Skip to content

idom-team/django-idom

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Django IDOM · Tests PyPI Version License

Django-IDOM connects your Python project to a ReactJS frontend, allowing you to create interactive websites without needing JavaScript!

Following ReactJS styling, web elements are combined into reusable "components". These components can utilize hooks and events to create infinitely complex web pages.

When needed, IDOM can use components directly from NPM. For additional flexibility, components can also be fully developed in JavaScript.

Any Python web framework with Websockets can support IDOM. See below for what frameworks are supported out of the box.

Supported Frameworks Supported Frameworks (External)
Flask, FastAPI, Sanic, Tornado Django, Plotly-Dash, Jupyter

At a Glance

my_app/components.py

You'll need a file to define your IDOM components. We recommend creating a components.py file within your chosen Django app to start out. Within this file, we will create a simple HelloWorld component.

from idom import component, html

@component
def HelloWorld(recipient: str):
    return html.h1(f"Hello {recipient}!")

my_app/templates/my-template.html

In your Django app's HTML located within your templates folder, you can now embed your IDOM component using the component template tag. Within this tag, you will need to type in your dotted path to the component function as the first argument.

Additonally, you can pass in keyword arguments into your component function. For example, after reading the code below, pay attention to how the function definition for HelloWorld (in the previous example) accepts a recipient argument.

{% load idom %}
<!DOCTYPE html>
<html>
  <body>
    {% component "example_project.my_app.components.HelloWorld" recipient="World" %}
  </body>
</html>

Resources

Follow the links below to find out more about this project.