<!--header-start-->
# Django-IDOM · [](https://github.com/idom-team/django-idom/actions?query=workflow%3ATest) [](https://pypi.python.org/pypi/django-idom) [](https://github.com/idom-team/django-idom/blob/main/LICENSE) [](https://idom-team.github.io/django-idom/)
<!--header-end-->
<!--intro-start-->
Django-IDOM connects your Python project to a ReactJS front-end, allowing you to create **interactive websites without needing JavaScript!**
Following ReactJS styling, web elements are combined into [reusable "components"](https://reactpy.dev/docs/guides/creating-interfaces/your-first-components/index.html#parametrizing-components). These components can utilize [hooks](https://reactpy.dev/docs/reference/hooks-api.html) and [events](https://reactpy.dev/docs/guides/adding-interactivity/responding-to-events/index.html#async-event-handlers) to create infinitely complex web pages.
When needed, IDOM can [use components directly from NPM](https://reactpy.dev/docs/guides/escape-hatches/javascript-components.html#dynamically-loaded-components). For additional flexibility, components can also be [fully developed in JavaScript](https://reactpy.dev/docs/guides/escape-hatches/javascript-components.html#custom-javascript-components).
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`](https://reactpy.dev/docs/guides/getting-started/installing-idom.html#officially-supported-servers) | [`Django`](https://github.com/idom-team/django-idom), [`Plotly-Dash`](https://github.com/idom-team/idom-dash), [`Jupyter`](https://github.com/idom-team/idom-jupyter) |
<!--intro-end-->
# At a Glance
## `my_app/components.py`
<!--py-header-start-->
You will need a file to define your [IDOM](https://github.com/idom-team/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 `hello_world` component.
<!--py-header-end-->
<!--py-code-start-->
```python
from idom import component, html
@component
def hello_world(recipient: str):
return html.h1(f"Hello {recipient}!")
```
<!--py-code-end-->
## [`my_app/templates/my-template.html`](https://docs.djangoproject.com/en/dev/topics/templates/)
<!--html-header-start-->
In your **Django app**'s HTML template, 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.
Additionally, you can pass in `args` and `kwargs` into your component function. For example, after reading the code below, pay attention to how the function definition for `hello_world` (_in the previous example_) accepts a `recipient` argument.
<!--html-header-end-->
<!--html-code-start-->
```jinja
{% load idom %}
<!DOCTYPE html>
<html>
<body>
{% component "example_project.my_app.components.hello_world" recipient="World" %}
</body>
</html>
```
<!--html-code-end-->
# Resources
<!--resources-start-->
Follow the links below to find out more about this project.
- [Try it Now](https://mybinder.org/v2/gh/idom-team/idom-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb) - Check out IDOM in a Jupyter Notebook.
- [Documentation](https://idom-team.github.io/django-idom) - Learn how to install, run, and use IDOM.
- [Community Forum](https://github.com/idom-team/idom/discussions) - Ask questions, share ideas, and show off projects.
<!--resources-end-->
Raw data
{
"_id": null,
"home_page": "https://github.com/idom-team/django-idom",
"name": "django-idom",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "interactive,widgets,DOM,React",
"author": "Ryan Morshead",
"author_email": "ryan.morshead@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/fc/49/e30ce46840f7c203ea829b0b7f8476eb347e8a3a8bb0d60efb8085a47aed/django_idom-3.0.1.tar.gz",
"platform": "Linux",
"description": "<!--header-start-->\n\n# Django-IDOM · [](https://github.com/idom-team/django-idom/actions?query=workflow%3ATest) [](https://pypi.python.org/pypi/django-idom) [](https://github.com/idom-team/django-idom/blob/main/LICENSE) [](https://idom-team.github.io/django-idom/)\n\n<!--header-end-->\n<!--intro-start-->\n\nDjango-IDOM connects your Python project to a ReactJS front-end, allowing you to create **interactive websites without needing JavaScript!**\n\nFollowing ReactJS styling, web elements are combined into [reusable \"components\"](https://reactpy.dev/docs/guides/creating-interfaces/your-first-components/index.html#parametrizing-components). These components can utilize [hooks](https://reactpy.dev/docs/reference/hooks-api.html) and [events](https://reactpy.dev/docs/guides/adding-interactivity/responding-to-events/index.html#async-event-handlers) to create infinitely complex web pages.\n\nWhen needed, IDOM can [use components directly from NPM](https://reactpy.dev/docs/guides/escape-hatches/javascript-components.html#dynamically-loaded-components). For additional flexibility, components can also be [fully developed in JavaScript](https://reactpy.dev/docs/guides/escape-hatches/javascript-components.html#custom-javascript-components).\n\nAny Python web framework with Websockets can support IDOM. See below for what frameworks are supported out of the box.\n\n| Supported Frameworks | Supported Frameworks (External) |\n| --- | --- |\n| [`Flask`, `FastAPI`, `Sanic`, `Tornado`](https://reactpy.dev/docs/guides/getting-started/installing-idom.html#officially-supported-servers) | [`Django`](https://github.com/idom-team/django-idom), [`Plotly-Dash`](https://github.com/idom-team/idom-dash), [`Jupyter`](https://github.com/idom-team/idom-jupyter) |\n\n<!--intro-end-->\n\n# At a Glance\n\n## `my_app/components.py`\n\n<!--py-header-start-->\n\nYou will need a file to define your [IDOM](https://github.com/idom-team/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 `hello_world` component.\n\n<!--py-header-end-->\n<!--py-code-start-->\n\n```python\nfrom idom import component, html\n\n@component\ndef hello_world(recipient: str):\n return html.h1(f\"Hello {recipient}!\")\n```\n\n<!--py-code-end-->\n\n## [`my_app/templates/my-template.html`](https://docs.djangoproject.com/en/dev/topics/templates/)\n\n<!--html-header-start-->\n\nIn your **Django app**'s HTML template, 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.\n\nAdditionally, you can pass in `args` and `kwargs` into your component function. For example, after reading the code below, pay attention to how the function definition for `hello_world` (_in the previous example_) accepts a `recipient` argument.\n\n<!--html-header-end-->\n<!--html-code-start-->\n\n```jinja\n{% load idom %}\n<!DOCTYPE html>\n<html>\n <body>\n {% component \"example_project.my_app.components.hello_world\" recipient=\"World\" %}\n </body>\n</html>\n```\n\n<!--html-code-end-->\n\n# Resources\n\n<!--resources-start-->\n\nFollow the links below to find out more about this project.\n\n- [Try it Now](https://mybinder.org/v2/gh/idom-team/idom-jupyter/main?urlpath=lab/tree/notebooks/introduction.ipynb) - Check out IDOM in a Jupyter Notebook.\n- [Documentation](https://idom-team.github.io/django-idom) - Learn how to install, run, and use IDOM.\n- [Community Forum](https://github.com/idom-team/idom/discussions) - Ask questions, share ideas, and show off projects.\n\n<!--resources-end-->\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Control the web with Python",
"version": "3.0.1",
"split_keywords": [
"interactive",
"widgets",
"dom",
"react"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "d541c162e53965dfe5660e58570e076a77479c93d47d8d1bcc8d1d095193d9a5",
"md5": "708910c37199d2a88eb71552a9d1f563",
"sha256": "91324a7fac75c7ca582498987173ba52d386edb1db084fd5d2e87dd9480216ab"
},
"downloads": -1,
"filename": "django_idom-3.0.1-py2.py3-none-any.whl",
"has_sig": false,
"md5_digest": "708910c37199d2a88eb71552a9d1f563",
"packagetype": "bdist_wheel",
"python_version": "py2.py3",
"requires_python": ">=3.8",
"size": 76869,
"upload_time": "2023-04-01T23:49:21",
"upload_time_iso_8601": "2023-04-01T23:49:21.894735Z",
"url": "https://files.pythonhosted.org/packages/d5/41/c162e53965dfe5660e58570e076a77479c93d47d8d1bcc8d1d095193d9a5/django_idom-3.0.1-py2.py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "fc49e30ce46840f7c203ea829b0b7f8476eb347e8a3a8bb0d60efb8085a47aed",
"md5": "908c2da2868452ce04f01da513f80236",
"sha256": "d401405df13ace319a6c8dc4d7092a83feb6b556eb802065611facb62f6aa77c"
},
"downloads": -1,
"filename": "django_idom-3.0.1.tar.gz",
"has_sig": false,
"md5_digest": "908c2da2868452ce04f01da513f80236",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 74449,
"upload_time": "2023-04-01T23:49:23",
"upload_time_iso_8601": "2023-04-01T23:49:23.552948Z",
"url": "https://files.pythonhosted.org/packages/fc/49/e30ce46840f7c203ea829b0b7f8476eb347e8a3a8bb0d60efb8085a47aed/django_idom-3.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-04-01 23:49:23",
"github": true,
"gitlab": false,
"bitbucket": false,
"github_user": "idom-team",
"github_project": "django-idom",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "django-idom"
}
JSON
