@material-ui/core#useScrollTrigger TypeScript Examples

AppBar: React.FunctionComponent<IAppBarProps> = () => {
  const classes = useStyles();
  const theme = useTheme();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <MuiAppBar
      position="sticky"
      color="default"
      className={classes.appBar}
      elevation={trigger ? 4 : 0}
    >
      <Toolbar>
        <Grid item xs>
          <FiretableLogo />
        </Grid>

        <Grid item>
          <Button
            component={Link}
            to={routes.signOut}
            color="primary"
            variant="outlined"
          >
            Sign Out
          </Button>
        </Grid>
      </Toolbar>
    </MuiAppBar>
  );
}

function HideOnScroll(props: Props) {
  const { children, window } = props;
  // Note that you normally won't need to set the window ref as useScrollTrigger
  // will default to window.
  // This is only being set here because the demo is in an iframe.
  const trigger = useScrollTrigger({ target: window ? window() : undefined });

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

ScrollTop = (): ReactElement => {
  const classes = useStyles()
  const trigger = useScrollTrigger({
    target: window,
    disableHysteresis: true,
    threshold: 100
  })

  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        <Fab color="default" size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </div>
    </Zoom>
  )
}

export default function HomeNavigation({
  children,
  open,
  setOpen,
  handleCreateTable,
}: IHomeNavigationProps) {
  const classes = useStyles();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <Grid
      container
      wrap="nowrap"
      alignItems="flex-start"
      className={clsx(open && classes.open)}
    >
      <Grid item className={classes.navDrawerContainer}>
        <NavDrawer
          open={open}
          onClose={() => setOpen(false)}
          handleCreateTable={handleCreateTable}
        />
      </Grid>

      <Grid item xs>
        <AppBar
          color="inherit"
          elevation={trigger ? 4 : 0}
          className={classes.appBar}
        >
          <Container>
            <Toolbar className={clsx(classes.maxHeight, classes.toolbar)}>
              <IconButton
                aria-label="Open navigation drawer"
                onClick={() => setOpen(true)}
                edge="start"
                className={classes.openButton}
              >
                <MenuIcon />
              </IconButton>

              <div className={classes.logo}>
                <FiretableLogo />
              </div>

              <UserMenu />
            </Toolbar>
          </Container>
        </AppBar>

        {children}
      </Grid>
    </Grid>
  );
}

Components: React.FC<ComponentsProps> = ({
  orderers,
  sources,
  processors,
}) => {
  const [search, setSearch] = useState('')
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  })

  const elevation = trigger ? 4 : 0

  const filteredOrderers = useMemo(
    () => filterComponents(orderers, search),
    [orderers, search]
  )

  const filteredSources = useMemo(
    () => filterComponents(sources, search),
    [sources, search]
  )

  const filteredProcessors = useMemo(
    () => filterComponents(processors, search),
    [processors, search]
  )

  return (
    <>
      <SearchInput
        elevation={elevation}
        maxWidth="1280px"
        width="100%"
        left="50%"
        position="fixed"
        px={2}
        py={3}
        onSearch={setSearch}
        style={{ transform: 'translateX(-50%)' }}
      />
      <Box height="75px" width="100%" />
      {orderers === undefined || filteredOrderers.length === 0 ? null : (
        <>
          <Heading.h1 py={4}>Orderers</Heading.h1>
          <Flex flexWrap="wrap">
            {filteredOrderers.map((orderer: Readonly<ComponentInfo>) => (
              <ComponentsInfoCard key={orderer.componentClass} info={orderer} />
            ))}
          </Flex>
        </>
      )}{' '}
      {sources === undefined || filteredSources.length === 0 ? null : (
        <>
          <Heading.h1 py={4}>Sources</Heading.h1>
          <Flex flexWrap="wrap">
            {filteredSources.map((source: Readonly<ComponentInfo>) => (
              <ComponentsInfoCard key={source.componentClass} info={source} />
            ))}
          </Flex>
        </>
      )}
      {processors === undefined || filteredProcessors.length === 0 ? null : (
        <>
          <Heading.h1 py={4}>Processors</Heading.h1>
          <Flex flexWrap="wrap">
            {filteredProcessors.map((processor: Readonly<ComponentInfo>) => (
              <ComponentsInfoCard
                key={processor.componentClass}
                info={processor}
              />
            ))}
          </Flex>
        </>
      )}
    </>
  )
}

Header: React.FC<HeaderProps> = ({
  position = 'sticky',
  children = {},
}) => {
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  })

  const elevation = trigger ? 4 : 0

  const { main, tools = [], errors = [] } = children

  return (
    <>
      <HeaderBar
        elevation={tools.length > 0 ? 0 : elevation}
        position={position}
      >
        <Container maxWidth="lg">
          <AppToolbar height="64px">
            <Box flexGrow={1}>
              <Link to="/">
                <Button variant="text">
                  <HeaderLogo />
                </Button>
              </Link>
            </Box>
            {main}
            <Link to="/components" aria-label="components">
              <IconButton ml={3} title="Components">
                <Icons.Build />
              </IconButton>
            </Link>
            <Link to="/help" aria-label="help">
              <IconButton title="Help">
                <Icons.Help />
              </IconButton>
            </Link>
            <ThemeSwitch lightColor="action.active" darkColor="action.active" />
          </AppToolbar>
        </Container>
      </HeaderBar>
      {tools.length > 0 ? (
        <Box height="32px">
          <HeaderAppBar
            margin={position === 'sticky' ? '64px' : '0'}
            elevation={errors.length > 0 ? 0 : elevation}
            position={position === 'sticky' ? 'fixed' : 'relative'}
            color="default"
          >
            <Container maxWidth="lg">
              <AppToolbar height="32px">
                <Box flexGrow={1} />
                {tools}
              </AppToolbar>
            </Container>
          </HeaderAppBar>
        </Box>
      ) : null}
      {errors.length > 0 ? (
        <Box height="54px">
          <MessageAppBar margin="96px" elevation={elevation} position="fixed">
            <Container maxWidth="lg">
              {/* Just showing first error */}
              <MessageBar message={errors[0]} severity="error" />
            </Container>
          </MessageAppBar>
        </Box>
      ) : null}
    </>
  )
}