It's React, but in Python
Project description
reactpy-jupyter
A client for 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
Then, before anything else, do one of the following:
-
At the top of your notebook run
import reactpy_jupyter
-
Register
reactpy_jupyter
as a permanant IPython extension in your config file:c.InteractiveShellApp.extensions = [ 'reactpy_jupyter' ]
Usage
Once you're done getting started, you can author and display ReactPy layouts natively in your Jupyter Notebook:
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:
ClickCountWidget = reactpy_jupyter.widgetize(ClickCount)
ipywidgets.Box(
[
ClickCountWidget(),
ClickCountWidget(),
]
)
Alternatively just wrap an reactpy
element instance in an reactpy_jupyter.LayoutWidget
:
ipywidgets.Box(
[
reactpy_jupyter.LayoutWidget(ClickCount()),
reactpy_jupyter.LayoutWidget(ClickCount()),
]
)
For a more detailed introduction check out this live demo here:
Development Installation
For a development installation (requires Node.js and Yarn version 1),
$ 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:
import os
os.environ["REACTPY_JUPYTER_DEV"] = "1"
import reactpy_jupyter
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for reactpy_jupyter-0.9.5-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | e63ecf35fba525c45a052e9546ac9edfc02fd8087b0b26dea5c594a1e83e735c |
|
MD5 | bcca54addd1caa8a717739f7b6d908ef |
|
BLAKE2b-256 | 8d5ccf76863fbcd0d714c89662afafa339ad9d7c538519bb780ff921056c23a4 |