パッケージ「classNames」で動的クラス・複数クラスを制御する
date
Jan 2, 2023
repo_url
slug
nextjs-classnames
status
Published
summary
type
Post
thumbnail_url
tags
nextjs
outer_link
動的なクラスの使い分けをしたり、複数のクラス名をつけたりする場合はclassNamesというnpmパッケージが便利です。
import classNames from 'classnames';
import { useRouter } from 'next/router';
import { useMemo } from 'react';
const router = useRouter();
const links = [
{ id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
{ id: 1, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout },
];
const activeNav = useMemo(() => {
//Blog
if (router.asPath === links[0].to) return links[0].to;
// About
if (router.asPath === links[1].to) return links[1].to;
return links[0].to;
}, [router]);
//現在のページをハイライトしたい場合のヘッダーナビ
<li className={classNames('text-black dark:text-gray-50 nav',
{'border-b-2 border-current': link.to === activeNav,})}>
//...
</li>
