react-accessible-accordionライブラリを使ってアコーディオンメニューを作ってみよう

こんにちわ。nap5です。

react-accessible-accordionライブラリを使ってアコーディオンメニューを作ってみたので、紹介したいと思います。

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

I mocked up this accordion menu using react-accessible-accordion.#react #javascript #100DaysOfCode #reactaccessibleaccordion

referencehttps://t.co/iShH3slTyj

demo codehttps://t.co/Kapu9dSinF

demo sitehttps://t.co/68kXO9z4hD

— nap5 (@napzak5) July 25, 2022

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

GitHub - springload/react-accessible-accordion: Accessible Accordion component for React

デモサイトです。

Sandbox - CodeSandbox

デモコードです。

cocky-browser-vkd48f - CodeSandbox

以下の記事のデモを流用して用意したので、こちらも併せてご覧になるとよいかもしれません。

react-burger-menuライブラリとreact-accessible-accordionライブラリを組み合わせたデモとして用意してみました。emotionで個別スタリングしている部分は参考になるかもしれません。

デモはベーシックな構成なので、他サイトへの横展開もハンディかもしれませんね。

メニューにアイコン付けてカスタマイズしてもいいかもしれません。

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

Tweets by napzak5

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

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

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

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

簡単ですが、以上です。