How to make AppBar component from material-ui-next react to scroll events

Question

As per Material Design guidelines:

Upon scrolling, the top app bar can […] transform in the following ways:
- Scrolling upward hides the top app bar

Answer 1

in the current version of Material-ui, you can simply use the following

import clsx from "clsx";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";
const trigger = useScrollTrigger();

https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger