PC Ant Design：Collapse のヘッダーとコンテンツの padding と背景色を変更する
スタイルを設定できる部分がコンポーネントによってらしい。Collapse は padding と背景色が変えられるようなので試してみた。ConfigProvider の theme で設定する。import React from "reac...
React
PC 
PC React：CTRL + S や Command + S で保存処理を行うには
create-next-app@13.4.19 で初期コードを生成後、実現したいフックを書いてみました。保存のショートカットキーで、指定した処理を実行するフックMac なら Command + S、Mac でなければ CTRL + S で指...
PC React：Cytoscape.js の図をじんわり更新する
以前の試作では、表示が即切り替わりました。Cytoscape.js に animate があるので、じんわり更新する試作をしてみました。import React, { FC, useRef, useEffect } from 're...
PC React：props で Cytoscape.js の図を更新する試作
試作内容<Child Elements={el} Styles={sy}/>上記のように、props で cytoscape へ設定するデータを渡して更新する Child コンポーネントの作成を目指します。テンプレ作成ベースとなるアプリは以...
PC React：Cytoscape.js の図を要素に合わせてリサイズする
Cytoscape.js を使った試作に、要素の大きさに図のサイズが追随するようなコードを追記しました。以前と差分がある行を強調表示にしています。（分かりづらいですが。） import React, { useRef, useEffect ...
PC React：Cytoscape.js を試した
前回に引き続き、ライブラリを物色しています。環境yarn create react-app my-app --template typescriptcd my-app yarn add cytoscapeyarn add -D @types...
PC React：maxGraph を試した
構成図や階層図に使えそうなライブラリを物色しています。現状、React でこの手のグラフを描画するライブラリの多くは相性が良くないと感じています。maxGraph を試した結果を残しますが、やはり React と相性が良くなさそうでした。別...
PC Redux Toolkit の RTK Query を定周期に実行する
以前 RTK Query を使ってみましたが、定周期で実行することができるようなので試しました。テンプレートの作成create-react-app でテンプレートを作成します。create-react-app のバージョンを指定しているのは...
PC ローカルで実行した React アプリでもサーバーの API を利用するには
結果、package.json に以下の様な proxy を設定すれば OK という話なのですが、やりたいことから順に説明していきます。 "proxy": "API のポートが 80 で無く、例えば 8080 なら、それも指定します。 "p...
PC React + Redux Toolkit + Storybook のプロジェクトを作成する
作成した React コンポーネントの確認に、Storybook が便利です。更に、Redux Toolkit を導入している場合はどうするか、を確認してみました。Redux Toolkit のプロジェクトを作成する公式で案内されている T...