その他

React GUI

インタラクティブなユーザーインターフェースを作るためのライブラリです^{react_gui_sandbox}。Reactのデザインシステムやコンポーネントライブラリをもとに作られているようです^{react_gui_doc}。コンポーネントやフックを読み込んで使います。例えば、ホバーすると色を変えるものを作りたいときは以下のように書きます。

1
import React from "react";
2
import { useHover } from "react-gui/use-hover";
3

4
export default function App() {
5
  const [hovered, onHoverChange] = React.useState(false);
6
  const ref = useHover({ onHoverChange });
7

8
  return (
9
    <div
10
      ref={ref}
11
      style={{
12
        width: 200,
13
        height: 200,
14
        margin: "50px auto",
15
        border: "1px solid black",
16
        backgroundColor: hovered ? "orange" : null
17
      }}
18
    />
19
  );
20
}

Remotion

RemotionはReactで動画が作れるライブラリです^remotion。Adobe Premire Proのような高度な動画編集はできませんが、テロップを入れたり、画像を入れたりなどできます。最近だと、Playerコンポーネントというものが追加され、動画をビルドせずとも再生できるようになりました^remotion26。