https://github.com/reactive-python/reactpy-jupyter
It's React, but in Jupyter
https://github.com/reactive-python/reactpy-jupyter
jupyter jupyter-lab jupyter-widgets reactpy
Last synced: 9 months ago
JSON representation
It's React, but in Jupyter
- Host: GitHub
- URL: https://github.com/reactive-python/reactpy-jupyter
- Owner: reactive-python
- License: mit
- Created: 2020-09-11T18:34:37.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-06-21T10:53:56.000Z (over 2 years ago)
- Last Synced: 2024-07-16T17:58:46.539Z (over 1 year ago)
- Topics: jupyter, jupyter-lab, jupyter-widgets, reactpy
- Language: Python
- Homepage:
- Size: 435 KB
- Stars: 66
- Watchers: 4
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
## Getting Started
To install use `pip`:
```
pip install 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.to_widget` 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.to_widget(ClickCount)
ipywidgets.Box(
[
ClickCountWidget(),
ClickCountWidget(),
]
)
```
For a more detailed introduction check out this live demo here:
## 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
```