いい感じのReflexコンポーネント集

Posted at 2024-12-31

はじめに

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()