はじめに

ReflexはPythonだけでWebアプリケーションを作成できるフレームワークです。

標準で豊富なコンポーネントを利用できますが、Reactで実装されたコンポーネントをカスタムコンポーネントとして追加することができます。

その中でもサクッと使えそうなものを集めてみました。(随時追加していく予定です)

イベントハンドラ系

reflex-swipe

スワイプ操作を検知して処理を実行できます。

pip install reflex-swipe

コード例

import reflex as rx
from reflex_swipe import swipeable


class State(rx.State):
    pass


@rx.page()
def index():
    return rx.center(
        swipeable(
            "Swipe Here",
            on_swiped_left=rx.call_script("alert('Swiped Left')"),
            on_swiped_right=rx.call_script("alert('Swiped Right')"),
            on_swiped_up=rx.call_script("alert('Swiped Up')"),
            on_swiped_down=rx.call_script("alert('Swiped Down')"),
            height="100px",
            width="100px",
            track_mouse=True,
        ),
        justify="center",
        align="center",
        height="100vh",
        width="100vw",
    )


app = rx.App()

reflex-intersection-observer

画面内に要素が表示されたかどうかを検知して処理を実行できます。

pip install reflex-intersection-observer

コード例

import reflex as rx
from reflex_intersection_observer import intersection_observer


class State(rx.State):
    pass


@rx.page()
def index():
    return rx.container(
        rx.text("スクロール↓", height="50vh"),
        rx.text("スクロール↓", height="50vh"),
        rx.text("スクロール↓", height="50vh"),
        intersection_observer(
            rx.text("hello"),
            on_intersect=rx.call_script('alert("Hello")'),
        ),
    )


app = rx.App()

カルーセル

reflex_responsive_carousel

pip install reflex-responsive-carousel

コード例

import reflex as rx
from reflex_responsive_carousel import responsive_carousel


class State(rx.State):
    pass


@rx.page()
def index():
    return rx.center(
        responsive_carousel(
            rx.image(
                src="https://fastly.picsum.photos/id/690/300/300.jpg?hmac=JT8HRyWByTMCFGAVkSiqN3wYVjx5zcMFQjONbIngvB0",
                height="300px",
                width="300px",
            ),
            rx.image(
                src="https://fastly.picsum.photos/id/957/300/300.jpg?hmac=gedYOXwWjlHfoe_as629m24q1Om-cz8SgCfXFtS4iIY",
                height="300px",
                width="300px",
            ),
            rx.image(
                src="https://fastly.picsum.photos/id/958/300/300.jpg?hmac=3SdUFTjP6wSep-xAQcICJYNW8XguLKswovG6ur9joqw",
                height="300px",
                width="300px",
            ),
            axis="horizontal",
            infinite_loop=True,
            show_arrows=False,
            swipeable=True,
            height="300px",
            width="300px",
        ),
        justify="center",
        align="center",
        height="100vh",
        width="100vw",
    )


app = rx.App()

アイコン

The Reflex Icon Library

Font Awesome、Simple Icons、GoogleのMaterial Symbols、GitHubのOcticons、Phosphor、Bootstrap Iconsなど、12,000以上のアイコンを利用できます。

pip install reflex-icon-library

コード例

import reflex as rx
import RIL as icons


class State(rx.State):
    pass


@rx.page()
def index() -> rx.Component:
    return rx.center(
        icons.fontawesome.solid("house"),
        icons.simple("python"),
        icons.material("Search"),
        icons.octicons("check-circle-fill"),
        icons.phosphor("acorn"),
        icons.bootstrap("airplane"),
        height="100vh",
        width="100vw",
        justify="center",
        align="center",
        direction="row",
        spacing="2",
    )


app = rx.App()

アニメーション

Motion

Framer Motionのラッパーで、シンプルなアニメーションライブラリです。

pip install reflex-motion

コード例

import reflex as rx
import reflex_motion.motion as motion


class State(rx.State):
    pass


@rx.page()
def index() -> rx.Component:
    return rx.center(
        motion(
            rx.button(
                "Spin me!",
                variant="soft",
            ),
            initial={"scale": 1},
            while_hover={"scale": 1.2, "rotate": 45},
            while_tap={"scale": 0.9},
            transition={"type": "spring", "stiffness": 260, "damping": 20},
        ),
        height="100vh",
        width="100vw",
        justify="center",
        align="center",
    )


app = rx.App()

UIフレームワーク

Buridan UI

Reflexを使った様々なレイアウトのテンプレート集です。pipなどでインストールするのではなく、shadcn/uiのようにコンポーネントのコードをコピペして利用します。

reflex-antd

UIフレームワークであるAnt Designを利用できます。

pip install reflex-antd

デモサイト
https://antd-demo.reflex.run

エディタ

reflex-monaco

コードエディタであるmonaco-editorを利用できます。

pip install reflex-monaco

コード例

import reflex as rx
from reflex_monaco import monaco


class State(rx.State):
    pass


@rx.page()
def index():
    return rx.center(
        rx.text("monaco editer"),
        monaco(
            default_language="python",
            default_value="print('Hello, world!')",
            height="500px",
            width="70%",
        ),
        height="100vh",
        width="100vw",
        justify="center",
        align="center",
        direction="column",
    )


app = rx.App()

グラフ

reflex-echarts

Apache Echartsを利用できます。

pip install reflex-echarts

コード例

https://github.com/masenf/reflex-echarts/blob/main/echarts_demo/echarts_demo/echarts_demo.py

メディア

reflex-audio-capture

音声を録音できます。timesliceの指定ができ、リアルタイム文字起こしなどに利用できます。

pip install reflex-audio-capture

コード例

https://github.com/masenf/reflex-audio-capture/blob/main/audio_capture_demo/audio_capture_demo/audio_capture_demo.py

reflex-webcam

pip install reflex-webcam

コード例

https://github.com/tgberkeley/reflex-webcam/blob/main/webcam_demo/webcam_demo/webcam_demo.py

マップ

reflex-map

地図ライブラリであるReact-Map-GLを利用できます。

pip install reflex-map

デモサイト

その他

公式ドキュメント上にreact-colorful、react-spline、ReactFlow、AG Charts、React Leaflet、React PDF Rendererを利用する例が掲載されています。

おわりに

Streamlitと比べるとまだ数は少ないですが、やはりReactの資産を活かせるのは強そうです。