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>
  );
};