# reactpy-jupyter
A client for [ReactPy](https://github.com/reactive-python/reactpy) implemented using Jupyter widgets
## Try It Now!
Check out some live examples by clicking the badge below:
<a href="https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?urlpath=lab%2Ftree%2Fnotebooks%2Fintroduction.ipynb">
<img alt="Binder" height="25px" src="https://mybinder.org/badge_logo.svg" />
</a>
## Getting Started
To install use `pip`:
```
pip install reactpy_jupyter
```
Then, before anything else, do one of the following:
1. At the top of your notebook run
```python
import reactpy_jupyter
```
2. Register `reactpy_jupyter` as a permanant IPython extension in [your config file](https://ipython.readthedocs.io/en/stable/config/intro.html#introduction-to-ipython-configuration):
```python
c.InteractiveShellApp.extensions = [
'reactpy_jupyter'
]
```
## Usage
Once you're done [getting started](#getting-started), you can author and display ReactPy
layouts natively in your Jupyter Notebook:
```python
import reactpy
@reactpy.component
def ClickCount():
count, set_count = reactpy.hooks.use_state(0)
return reactpy.html.button(
{"onClick": lambda event: set_count(count + 1)},
[f"Click count: {count}"],
)
ClickCount()
```
You can also turn an `reactpy` element constructor into one that returns an `ipywidget` with
the `reactpy_juptyer.widgetize` function. This is useful if you wish to use ReactPy in combination
with other Jupyter Widgets as in the following example:
```python
ClickCountWidget = reactpy_jupyter.widgetize(ClickCount)
ipywidgets.Box(
[
ClickCountWidget(),
ClickCountWidget(),
]
)
```
Alternatively just wrap an `reactpy` element instance in an `reactpy_jupyter.LayoutWidget`:
```python
ipywidgets.Box(
[
reactpy_jupyter.LayoutWidget(ClickCount()),
reactpy_jupyter.LayoutWidget(ClickCount()),
]
)
```
For a more detailed introduction check out this live demo here:
<a href="https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?filepath=notebooks%2Fintroduction.ipynb">
<img alt="Binder" height="25px" src="https://mybinder.org/badge_logo.svg" />
</a>
## Development Installation
For a development installation (requires [Node.js](https://nodejs.org) and [Yarn version 1](https://classic.yarnpkg.com/)),
$ git clone https://github.com/reactive-python/reactpy-jupyter.git
$ cd reactpy-jupyter
$ pip install -e .
To automatically re-build and refresh Jupyter when making changes start a Vite dev server:
$ npx vite
Then, before importing `reactpy_jupyter` set the following environment variable:
```python
import os
os.environ["REACTPY_JUPYTER_DEV"] = "1"
import reactpy_jupyter
```
Raw data
{
"_id": null,
"home_page": "https://github.com/reactive-python/reactpy",
"name": "reactpy-jupyter",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": "",
"keywords": "interactive,widgets,DOM,React",
"author": "Ryan Morshead",
"author_email": "ryan.morshead@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/6f/83/13313210db5913f134e7085a70918bfbb508229397620b502219b0912e40/reactpy_jupyter-0.9.5.tar.gz",
"platform": "Linux",
"description": "# reactpy-jupyter\n\nA client for [ReactPy](https://github.com/reactive-python/reactpy) implemented using Jupyter widgets\n\n## Try It Now!\n\nCheck out some live examples by clicking the badge below:\n\n<a href=\"https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?urlpath=lab%2Ftree%2Fnotebooks%2Fintroduction.ipynb\">\n <img alt=\"Binder\" height=\"25px\" src=\"https://mybinder.org/badge_logo.svg\" />\n</a>\n\n## Getting Started\n\nTo install use `pip`:\n\n```\npip install reactpy_jupyter\n```\n\nThen, before anything else, do one of the following:\n\n1. At the top of your notebook run\n\n ```python\n import reactpy_jupyter\n ```\n\n2. Register `reactpy_jupyter` as a permanant IPython extension in [your config file](https://ipython.readthedocs.io/en/stable/config/intro.html#introduction-to-ipython-configuration):\n\n ```python\n c.InteractiveShellApp.extensions = [\n 'reactpy_jupyter'\n ]\n ```\n\n## Usage\n\nOnce you're done [getting started](#getting-started), you can author and display ReactPy\nlayouts natively in your Jupyter Notebook:\n\n```python\nimport reactpy\n\n@reactpy.component\ndef ClickCount():\n count, set_count = reactpy.hooks.use_state(0)\n return reactpy.html.button(\n {\"onClick\": lambda event: set_count(count + 1)},\n [f\"Click count: {count}\"],\n )\n\nClickCount()\n```\n\nYou can also turn an `reactpy` element constructor into one that returns an `ipywidget` with\nthe `reactpy_juptyer.widgetize` function. This is useful if you wish to use ReactPy in combination\nwith other Jupyter Widgets as in the following example:\n\n```python\nClickCountWidget = reactpy_jupyter.widgetize(ClickCount)\nipywidgets.Box(\n [\n ClickCountWidget(),\n ClickCountWidget(),\n ]\n)\n```\n\nAlternatively just wrap an `reactpy` element instance in an `reactpy_jupyter.LayoutWidget`:\n\n```python\nipywidgets.Box(\n [\n reactpy_jupyter.LayoutWidget(ClickCount()),\n reactpy_jupyter.LayoutWidget(ClickCount()),\n ]\n)\n```\n\nFor a more detailed introduction check out this live demo here:\n\n<a href=\"https://mybinder.org/v2/gh/reactive-python/reactpy-jupyter/main?filepath=notebooks%2Fintroduction.ipynb\">\n <img alt=\"Binder\" height=\"25px\" src=\"https://mybinder.org/badge_logo.svg\" />\n</a>\n\n## Development Installation\n\nFor a development installation (requires [Node.js](https://nodejs.org) and [Yarn version 1](https://classic.yarnpkg.com/)),\n\n $ git clone https://github.com/reactive-python/reactpy-jupyter.git\n $ cd reactpy-jupyter\n $ pip install -e .\n\nTo automatically re-build and refresh Jupyter when making changes start a Vite dev server:\n\n $ npx vite\n\nThen, before importing `reactpy_jupyter` set the following environment variable:\n\n```python\nimport os\nos.environ[\"REACTPY_JUPYTER_DEV\"] = \"1\"\nimport reactpy_jupyter\n```\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "It's React, but in Python",
"version": "0.9.5",
"project_urls": {
"Homepage": "https://github.com/reactive-python/reactpy"
},
"split_keywords": [
"interactive",
"widgets",
"dom",
"react"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "8d5ccf76863fbcd0d714c89662afafa339ad9d7c538519bb780ff921056c23a4",
"md5": "bcca54addd1caa8a717739f7b6d908ef",
"sha256": "e63ecf35fba525c45a052e9546ac9edfc02fd8087b0b26dea5c594a1e83e735c"
},
"downloads": -1,
"filename": "reactpy_jupyter-0.9.5-py3-none-any.whl",
"has_sig": false,
"md5_digest": "bcca54addd1caa8a717739f7b6d908ef",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 26558,
"upload_time": "2023-05-19T02:52:14",
"upload_time_iso_8601": "2023-05-19T02:52:14.583462Z",
"url": "https://files.pythonhosted.org/packages/8d/5c/cf76863fbcd0d714c89662afafa339ad9d7c538519bb780ff921056c23a4/reactpy_jupyter-0.9.5-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "6f8313313210db5913f134e7085a70918bfbb508229397620b502219b0912e40",
"md5": "a4e80342cf21e5be125802dce6286bd8",
"sha256": "05e075deacaef3bd5ec0ab052276b7eccbd1d39ba86f9b04dac656a7d82449a5"
},
"downloads": -1,
"filename": "reactpy_jupyter-0.9.5.tar.gz",
"has_sig": false,
"md5_digest": "a4e80342cf21e5be125802dce6286bd8",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 28215,
"upload_time": "2023-05-19T02:52:16",
"upload_time_iso_8601": "2023-05-19T02:52:16.549352Z",
"url": "https://files.pythonhosted.org/packages/6f/83/13313210db5913f134e7085a70918bfbb508229397620b502219b0912e40/reactpy_jupyter-0.9.5.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-05-19 02:52:16",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "reactive-python",
"github_project": "reactpy",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "reactpy-jupyter"
}
JSON
