Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍
Zennに書くのは初めてなのでお手柔らかにお願いします🙏
最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻
冗談はさておき、スプレッドシート便利ですよね。
こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢
かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺
というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。
デモ
で、出来上がったのがこちらです🤲
Chromeだとiframeの埋め込み越しにセルのドラッグができないみたいなので直接CodeSandboxに行くか、別のブラウザでアクセスしてください😿
(Drag APIがiframeのセキュリティ機構に邪魔されてる？)
見た目や挙動はGoogleスプレッドシートに寄せました。とはいってもキングと比べるとまだ全然ですが...
そのほかのサンプルは こちら
機能
ショートカットキーについては以下をサポートしてます👀
- 全選択(Ctrl+a)
- コピー(Ctrl+c)
- 切り取り(Ctrl+x)
- ペースト(Ctrl+v)
- Undo(Ctrl+z)
- Redo(Ctrl+Shift+z or Ctrl+r)
- 検索(Ctrl+f)
- 保存(Ctrl+s)
- onSaveに指定したコールバック関数を呼び出す
(あと右クリックでメニューが開きます)
また、 Renderer という仕組みによってセルの表示を変えられます。
特定の行、特定の列、特定のセルだけに Renderer やスタイルをあてられる作りにしました。
「行、列の追加」、「数式のサポート」はこれからです。一段落してきた雰囲気があるのでユニットテストもそろそろ書きます。
詳細についてはドキュメントを参照ください。
気になった方はぜひスターしてください⭐️ 泣いて喜びます🤣😂😭！！
今回使った技術は TypeScript, React, Redux(Toolkit) です。もし反響があれば技術解説記事とかも書いてみようと思います😇
Discussion