React Reactive Nav

React navbar component that mimics Android-like toolbar scrolling behavior.

Installation

yarn add react-reactive-nav

or

npm i react-reactive-nav

Basic Usage

import { ReactiveNav } from 'react-reactive-nav';

const MyComponent = () => (
  <ReactiveNav height={64}>
    {/* navbar / appbar content goes here */}
  </ReactiveNav>
);

Props

Name	Type	Default	Description
children	ReactNode		The content of the navbar.
height*	number		Height of the navbar.
snap	boolean	false	Snap to the closest state of the navbar based on the scroll amount.
snapDelay	number	200	Set the delay of snap checking after scrolling (in ms). Only applies if snap is set to true.
snapDuration	number	200	Specify how long the snap animation should run (in ms). Only applies if snap is set to true.
paddingElementProps	HTMLAttributes<HTMLDivElement>		Props passed to the padding element (blank div with a set height).

* Required

Examples

MUI (Material-UI)

import {
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  useTheme,
  useMediaQuery,
} from '@mui/core';
import { Menu as MenuIcon } from '@mui/icons-material';
import { ReactiveNav } from 'react-reactive-nav';

const MyComponent = () => {
  const theme = useTheme();
  const smUp = useMediaQuery(theme.breakpoints.up('sm'));

  return (
    <ReactiveNav height={smUp ? 64 : 56}>
      <AppBar>
        <Toolbar>
          <IconButton
            edge='start'
            color='inherit'
            aria-label='menu'
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant='h6' color='inherit' component='div'>
            App Bar
          </Typography>
        </Toolbar>
      </AppBar>
    </ReactiveNav>
  );
};