React で Three.js を扱うためのライブラリ、 @react-three/fiber で、タイトル通りのことをしたい場合の話。 r3f.docs.pmnd.rs 例えば、画面を4分割して4種類の 3D モデルを同じ角度から比較したい、などと言ったときに使える、複数の Canvas 間で OrbitCon…

React で children で渡ってきた子コンポーネントのうち、テキスト部分だけ取り出したいこと、ありますよね？ そういうときに便利なのが React Children Utilities です。 こんな感じで使えます。 import Children from "react-children-utilities"; type Pr…

最近ゼロランタイム CSS-in-JS を触っていることがあるのですが、今回はラクスさんのブログで紹介していた macaron についての記事です。 macaron は、 styled-components などの CSS-in-JS とは異なり、ビルド時に静的な CSS を吐き出すいわゆるゼロランタ…

@ant-design/plots という、統計情報みたいなグラフを表示するための Alibaba グループの出しているライブラリがあります。 これは様々なカスタマイズができていろいろ便利なのですが、なにせドキュメントが英文化されていないのに加えて抜けがあるみたいな…

React Hooks でフォームデータ (multipart/form-data)を POST したいけど、いまいち参考例がなかったので、作ってみたというメモ。 といってもやり方は普通に useSWR や useFetch とかと同じ感じかな。 React Hooks 自体はこんな感じ import axios from "axi…

個人的に最近よく使っている React のステート管理ライブラリである Recoil と、外部ストレージ (DB や URL) などとステートを同期するライブラリ Recoil Sync を使って、 LocalStorage にデータを保存しようという記事です。 ということで、いつも通り準備…

このブログは互換性重視なので、極力通常の Markdown を書いているのですが、例えばドキュメントサイトとかだと、 React Component を扱えると便利なケースがあります。 よくあるパターンだと、タブとかそういうものですね。 ということで、 Next.js で MDX …

このブログでは react-syntax-highlighter を使っているのですが、下のような形式の場合 ```javascript:next.config.js module.exports = { } ``` つまりは、言語名の後に :filename という形で指定された場合、ファイル名として表示する実装をしています。 …

GitHub Pages みたいに、 https://mika-f.github.io/hoge/ という URL しか使えないとき、 React Router で /hoge をルートとして扱いたかった。 バージョンとかは以下の通り。 history@2.1.2 react-redux@^5.0.2 react-router@^2.8.1 react-router-redux@^4…