rc-scrollbarsライブラリとreact-menuライブラリを使ってグリッド表示とリスト表示ができるUIを作ってみよう

こんにちわ。nap5です。

rc-scrollbarsライブラリとreact-menuライブラリを使ってグリッド表示とリスト表示ができるUIを作ってみた、紹介したいと思います。

rc-scrollbarsライブラリはこちらです。

GitHub - sakhnyuk/rc-scrollbars: React scrollbars component

react-menuライブラリはこちらです。

React menu component - szhsin/react-menu

デモコードです。

angry-chebyshev-cs0zje - CodeSandbox

デモサイトです。

Vite App

グリッドの場合とリストの場合でアタッチするクラス名を変えてcolumn-countプロパティを付けたりして、実現しています。

追記 column-countプロパティだとメニューが隠れてしまっていたので、column-countプロパティではなく、グリッドレイアウトを素直に使うように修正しました。

FLIPアニメーションとかを入れて並び替えの時に動き入れてもいいかもしれませんね。今回はベーシックなUIを作ってみました。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。