MUIでの「AppBar」をスクロール時に隠す方法（備忘録）

はじめに

環境

• react: "^17.0.0 || ^18.0.0",
• @mui/material：^5.15.9
• @emotion/react：^11.11.3
• @emotion/styled：^11.11.0

実装

下にスクロールしたときにAppBar(ヘッダー）が隠れるようにする処理です。
リファレンスにも記されていますが、備忘録として記します。

components/layout/header.tsx

import { AppBar, Slide } from "@mui/material";
import useScrollTrigger from '@mui/material/useScrollTrigger';

const Header = () => {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <AppBar position="fixed">ヘッダー</AppBar>
    </Slide>
  );
}
export default Header;

MUIの Slide コンポーネントは、要素の表示・非表示のアニメーションが適用されます。
useScrollTrigger() でスクロールイベントに応じ true | false を返します。
in プロパティは、スライドインのアニメーションを実行します。
つまり、スクロールが停止したら、スライドインをします。

方向を指定したい場合は、Slide に direction プロパティを設けます。

参考

Slide API
App Bar