react-stay-in-view

A react hook and component to create popper (popover) that never leave the screen. Created elements will not disappear from the screen when scrolling and resizing.

Features

• 🚀 Fast - Built with hooks and functional components only.
• 🛠 Written in TypeScript - It'll fit right into your existing TypeScript project.
• 👫 Cross-browser - Works out-of-the-box for most browsers, regardless of version.
• 📲 Mobile-friendly - Supports mobile devices and touch screens.
• 🌳 Tree-shakeable - Only include the parts you use.
• 🗜 Lightweight - Around ~1.1kB.
• 💨 No dependencies

Try it live:

Install

  # with npm
  npm install --save react-stay-in-view
  # with yarn
  yarn add react-stay-in-view

Usage

useStayInView hook

import { useStayInView } from 'react-stay-in-view';

const StayInView = ({ className, children, anchorEl, placement }) => {
  const { ref } = useStayInView({ anchorEl, placement });

  return (
    <div ref={ref} className={className}>
      {children}
    </div>
  );
};

Props

Output: ref - paste this ref in your component

| Name | Description | Type | Required | Default Value | | ------------------ | -------------------------------------------------------------------- | ------------- | -------- | ------------- | | anchorEl | An element relative to which the new position will be fixed | HTMLElement | | null | | placement | Element position relative to anchorEl | string | | right-start | | avoidAnchorOverlap | Prevents anchorEl from overlapping when scrolling to screen border | boolean | | true |

StayInView component

import { StayInView } from 'react-stay-in-view';

const App = () => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  const [isVisible, setIsVisible] = useState<boolean>(false);

  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(e.currentTarget);
    setIsVisible((prev) => !prev);
  };

  return (
    <div>
      {isVisible && (
        <StayInView anchorEl={anchorEl}>
          <div>I stay on the screen</div>
        </StayInView>
      )}
      <button onClick={onClick}>Click me!</button>
    </div>
  );
};

Props

| Name | Description | Type | Required | Default Value | | ------------------ | -------------------------------------------------------------------- | ------------- | -------- | ------------- | | children | A children element | ReactNode | ✅ | | | className | Container class name. | string | | null | | anchorEl | An element relative to which the new position will be fixed | HTMLElement | | null | | placement | Element position relative to anchorEl | string | | right-start | | avoidAnchorOverlap | Prevents anchorEl from overlapping when scrolling to screen border | boolean | | true |

Contributions

Learn how to contribute

License

MIT © vdmrgv