use-react-router-breadcrumbsライブラリを使ってパンくずリストを作ってみよう

こんにちわ。nap5です。

use-react-router-breadcrumbsライブラリを使ってパンくずリストを作ってみたので、紹介したいと思います。

Twiiterにも投稿してみました。

https://twitter.com/napzak5/status/1550741189753974784

I mocked up this breadcrumb using use-react-router-breadcrumbs.#react #javascript #100DaysOfCode #usereactrouterbreadcrumbs

referenecehttps://t.co/uim7LedXaJ

demo codehttps://t.co/HxyAXN91Um

demo sitehttps://t.co/oH2Jw3gK1j

— nap5 (@napzak5) July 23, 2022

use-react-router-breadcrumbsライブラリはこちらになります。

GitHub - icd2k3/use-react-router-breadcrumbs: tiny, flexible, hook for rendering route breadcrumbs with react-router v6

デモサイトです。

Vite App

デモコードです。

naughty-golick-66k39n - CodeSandbox

ベーシックなレイアウトを作ることができました。今回はフラットなルーティングのデモだったので、次のアクションとしてはネストしたルーティングを含む場合にチャレンジしてもいいかもしれませんね。

メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。

Nap5の部屋｜nap5

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

Tweets by napzak5

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

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

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

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

簡単ですが、以上です。