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

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

https://reflex.dev

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

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

## イベントハンドラ系

### reflex-swipe
スワイプ操作を検知して処理を実行できます。
![trim.6F101AAE-2287-47FB-A598-0FE45179FFD4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/d3e72a56-5bc6-847e-5d39-d333a2cac206.gif)

``` bash
pip install reflex-swipe
```

https://github.com/adhami3310/reflex-swipe

<details>
  <summary>コード例</summary>

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

</details>

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

![trim.90F3076A-1308-4099-A30C-4C6615AC4A08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/539e8372-5d2b-2044-b902-e2ab188cca0b.gif)


``` bash
pip install reflex-intersection-observer
```

https://github.com/masenf/reflex-intersection-observer

<details>
  <summary>コード例</summary>

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

```

</details>


## カルーセル

### reflex_responsive_carousel

![trim.EF918D82-8EFB-49D3-A565-BB51170A259F.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/0156ef5d-b74b-4d81-3b68-6e0160c0088b.gif)

``` bash
pip install reflex-responsive-carousel
```

https://github.com/Jhanfer/reflex_responsive_carousel

<details>
  <summary>コード例</summary>

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

```

</details>

## アイコン

### The Reflex Icon Library

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

![IMG_1072.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/fe719d5c-1d91-6d70-01b3-a79089f35b17.jpeg)


``` bash
pip install reflex-icon-library
```

https://github.com/celsiusnarhwal/RIL

<details>
  <summary>コード例</summary>

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

```

</details>


## アニメーション

###  Motion
[Framer Motion](https://motion.dev)のラッパーで、シンプルなアニメーションライブラリです。
![recording-_online-video-cutter.com_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/394988a9-c3a5-b6e5-5f48-8218ff1d10e7.gif)

``` bash
pip install reflex-motion
```

https://pypi.org/project/reflex-motion/

<details>
  <summary>コード例</summary>

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

```

</details>

## UIフレームワーク

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

![IMG_1038.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/6b40f413-6ce1-cc59-7a29-78d9b8a4119e.jpeg)


https://buridan.reflex.run

### reflex-antd
UIフレームワークである[Ant Design](https://ant.design)を利用できます。

``` bash
pip install reflex-antd
```

https://github.com/seewindcn/reflex-antd

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

## エディタ
### reflex-monaco
コードエディタである[monaco-editor](https://www.npmjs.com/package/@monaco-editor/react)を利用できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/60c5cabb-8824-6b6d-2c5f-e9208eccd1a0.png)

``` bash
pip install reflex-monaco
```

https://github.com/Lendemor/reflex-monaco

<details>
  <summary>コード例</summary>

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

```

</details>

## グラフ
### reflex-echarts
[Apache Echarts](https://echarts.apache.org/en/index.html)を利用できます。

![trim.F3ACEF1B-37A4-4B46-81F9-5A62265F3A58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/74612807-8939-a9ef-710c-c073bb2033fc.gif)


``` bash
pip install reflex-echarts
```

https://github.com/masenf/reflex-echarts

<details>
  <summary>コード例</summary>

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

</details>

## メディア

### reflex-audio-capture

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

``` bash
pip install reflex-audio-capture
```

https://github.com/masenf/reflex-audio-capture


<details>
  <summary>コード例</summary>

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

</details>

### reflex-webcam

``` bash
pip install reflex-webcam
```

https://github.com/tgberkeley/reflex-webcam

<details>
  <summary>コード例</summary>

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

</details>

## マップ
### reflex-map
地図ライブラリであるReact-Map-GLを利用できます。

``` bash
pip install reflex-map
```

https://github.com/daniel-fink/reflex-map

デモサイト

https://reflex-map.reflex.run/

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

https://reflex.dev/docs/wrapping-react/guide/

https://reflex.dev/docs/wrapping-react/example/

https://reflex.dev/docs/wrapping-react/more-wrapping-examples/

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