toorrepuS/reactpy-jupyter

It's React, but in Jupyter

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

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.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 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