@etsoo/materialui/lib/mjs/ScrollTopFab.js

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
import useScrollTrigger from "@mui/material/useScrollTrigger";
import Zoom from "@mui/material/Zoom";
import Fab from "@mui/material/Fab";
/**
 * Scroll to top fab
 * @returns Component
 */
export function ScrollTopFab(props) {
    // Destruct
    const { color, size, target, title } = props;
    // Scroll trigger
    const trigger = useScrollTrigger({
        target,
        disableHysteresis: true,
        threshold: 120
    });
    // Icon click handler
    // behavior: 'smooth'
    const handleClick = () => {
        target.scrollTo({ top: 0 });
    };
    return trigger ? (_jsx(Zoom, { in: trigger, children: _jsx(Fab, { color: color, size: size, title: title, onClick: handleClick, children: _jsx(VerticalAlignTopIcon, {}) }) })) : (_jsx(React.Fragment, {}));
}