A client for ReactPy implemented using Jupyter widgets

Check out some live examples by clicking the badge below:

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

   import reactpy_jupyter

2. Register reactpy_jupyter as a permanant IPython extension in your config file:

   c.InteractiveShellApp.extensions = [ 'reactpy_jupyter' ]

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:

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 . $ jupyter nbextension install --py --symlink --overwrite --sys-prefix reactpy_jupyter $ jupyter nbextension enable --py --sys-prefix reactpy_jupyter 

When actively developing your extension for JupyterLab, run the command:

$ jupyter labextension develop --overwrite reactpy_jupyter 

Then you need to rebuild the JS when you make a code change:

$ cd js $ yarn run build 

You then need to refresh the JupyterLab page when your javascript changes.