ラウンドロビンレイアウトを作ってみました～Next.jsのAppRouterを使って～

こんにちわ。nap5です。

Next.jsのAppRouterを使ってラウンドロビンレイアウトを作ってみましたので紹介したいと思います。

デモコードです。

タイトル未設定

デモサイトです。

Create Next App

ラウンドロビンの実態はこの関数です

import { shift } from 'radash'

export const robin = <T>(data: T[], n: number = 0) => {
  const shifted = shift(data, n)
  const [first, second, ...rest] = shifted
  return { first, second, rest }
}

クリックするときにカウンタをインクリメントさせて、ステート管理用のnanostoreを使ってぐるぐるさせています

Tweets by napzak5

簡単ですが、以上です。