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: about 2 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 4 years ago)
• Default Branch: main
• Last Pushed: 2023-06-21T10:53:56.000Z (over 1 year ago)
• Last Synced: 2024-07-16T17:58:46.539Z (5 months 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

```