Chapter 24無料公開

TabをURL Hashに同期する

terrierscript
terrierscript
2021.05.09に更新
このチャプターの目次

https://chakra-ui.com/docs/disclosure/tabs

TabsコンポーネントをURLに反映させることを考えてみましょう。
URLのどの部位を使うかは様々ありますが、今回はURL Hashとして実装してみます。

(next.jsと組み合わせてpathを書き換えるパターンはこちらの記事に記載していますので、合わせてご参照ください)

実装

下記のようになります。

import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"
import React, { useMemo } from "react"

const tabMap = [
  "dog", "cat"
]

const Page = () => {
  const initialTab = useMemo(() => {
    if (typeof location === "undefined") { // SSR対応
      return 0
    }
    return Math.max(tabMap.indexOf(location.hash.replace("#", "")), 0)
  }, [])
  return <Box>
    <Tabs
      onChange={(idx) => { location.hash = `#${tabMap[idx]}` }}
      defaultIndex={initialTab}
    >
      <TabList>
        <Tab>
          {tabMap[0]}
        </Tab>
        <Tab>
          {tabMap[1]}
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          🐶
        </TabPanel>
        <TabPanel>
          🐱
        </TabPanel>
      </TabPanels>
    </Tabs>
  </Box>
}
  • useMemoの部分でlocationの判定を入れています。
    • これはコンポーネントの外側で行うなど様々パターンがありましたが、今回はuseMemoを利用しました
  • hashの値から、tab名をindexOfで判定します。
  • tabの変更時は、location.hashに値を入れることで更新を行います

Demo