notebook

都内でWEB系エンジニアやってます。

React

Reactでタイマーを作ってPicture in Pictureで表示する

この記事は Reactのカレンダー | Advent Calendar 2021 - Qiita 9日目の記事です 会議やワークなどでファシリテーションする際、「ちょっと時間取るのでこの作業しましょう」や「1人○分で意見を言いましょう」といったことが良くある Miroなどはタイマー機能…

PixelaのグラフをGatsby製のブログに埋め込む

PixelaのグラフをGatsby(React)で表示させたい 素直にsvgをobjectタグで読み込むだけだとツールチップが表示されないのでせっかくなら表示させたい (※前提の参考リンクをよく読めばiframeで良くないか?という話になるが、今回はmswを使って開発しているとき…

Reactでpropsの型を取得する

Reactの勉強を始めたので覚えたことを残していく ComponentProps コンポーネントの型注釈を取得できる const Hoge = (props: {p1: string, p2: string}) => { return <div></div> } type HogeProps = ComponentProps<typeof Hoge> const Fuga = (props: HogeProps) => { return <div></div> } こ</typeof>…