React / Next.js で Css Modules を使って選択したDOMに対する手続き的処理を行いたい場合のメモ

はじめに

普段はstyled-componentsを使っているのですが、他の手法にも慣れておこうとReact / Next.js共にデフォルトで使用できるCss Modulesを使ってみました。
この際、DOMに対する手続き的処理の方法で少し詰まったので備忘録として書いておこうと思います。

ここで言う手続き的処理とは、jsxのonClickやonChange, onSubmitなどで処理を記述または動作させずに、querySelectorやaddEventListenerなどを用いて処理を記述していくことを指します。

結論

import headerStyle from "../../styles/header/header.module.css";

export const useNavView = () => {
    const headerBtnAct: () => void = () => {
        const headerNav = document.querySelector(`.${headerStyle.headerNavArea} nav`);
        const headerBtn = document.querySelector(`.${headerStyle.headerBtn}`);
        headerBtn?.classList.toggle(headerStyle.ViewOn);
        headerNav?.classList.toggle(headerStyle.ViewOn);
    }

    const removeAct: () => void = () => {
        const headerNav = document.querySelector(`.${headerStyle.headerNavArea} nav`);
        const headerBtn = document.querySelector(`.${headerStyle.headerBtn}`);
        if (headerNav?.classList.contains(headerStyle.ViewOn)) {
            headerNav?.classList.remove(headerStyle.ViewOn);
            headerBtn?.classList.remove(headerStyle.ViewOn);
        }
    }

    return { headerBtnAct, removeAct }
}

• document.querySelector(`.${headerStyle.headerNavArea} nav`)
  

  .CssModulesStyleElm DOMという形で絞り込み指定ができる。

• document.querySelector(`.${headerStyle.headerBtn}`)
  

  単数指定は上記の形。

• if (headerNav?.classList.contains(headerStyle.ViewOn)) {
      headerNav?.classList.remove(headerStyle.ViewOn); // headerNav の .ViewOn を削除
      headerBtn?.classList.remove(headerStyle.ViewOn); // headerBtn の .ViewOn を削除
  }
  

  class属性の指定方法

さいごに

もし間違いなどあればコメントでご指摘・ご教授いただければ幸いです。
読んでいただき、ありがとうございました。