reactpy-jupyter 0.9.5

Description:

reactpyjupyter 0.9.5

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