typesafe-layered-breadcrumbs

概要

型安全かつ、階層構造を保ったパンくずを実装できるライブラリです。

階層構造を保つ

例えば、あるサイトの階層構造が以下のようになっているとします。

トップページ
トップページ > ユーザー一覧
トップページ > ユーザー一覧 > プロフィール

ユーザー一覧ページとプロフィールページの間に「職業別ユーザー一覧ページ」が加わったらどうなるでしょう。

トップページ
トップページ > ユーザー一覧 > 職業別ユーザー一覧
トップページ > ユーザー一覧 > 職業別ユーザー一覧 > プロフィール

このように、複数ページのパンくずリストを修正する必要が生じます。

本ライブラリを利用することで、パンくずの親子関係を定義できるため、特定のページの階層構造を変更すると子ページにも反映することが可能となります。

トップページ
トップページ > ユーザー一覧 > 職業別ユーザー一覧
　　　　　　　　　↓　自動反映
トップページ > ユーザー一覧 > 職業別ユーザー一覧 > プロフィール

利用方法

トップページ

import {
  BreadcrumbsBuilder,
} from 'typesafe-layered-breadcrumbs'

/**
 * トップページのパンくずリストアイテムを表現する
 */
export const TopPage: BreadcrumbsBuilder = () => {
  return [{
    text: 'トップページ',
    to: '/',
  }]
}