equinusocio / react-sticky-spy

Super minimal ~400byte css-free react component that detect and add a custom attribute to a position: sticky element when it is stuck inside the scrolling container.

Home Page:https://react-sticky-spy.stackblitz.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Sticky Spy

Super minimal 400 byte css and dependencies free react component that detects and add a custom attribute to a position: sticky element when it is stuck inside the scrolling container.

Installation

Install the package with your favourite package manager:

npm i react-sticky-spy
# or
pnpm i react-sticky-spy
# or
yarn add react-sticky-spy

πŸ‘‰ Live Demo

Usage

Import the component and wrap your sticky element. This component doesn't add any wrapper so your markup and style is safe (well, it adds just a empty spy element before but...Hey πŸ‘‰πŸ˜ŽπŸ‘‰, it's free)

The StickySpy component add a custom attribute to the wrapped element so you can control the style using CSS. Additionally, by using the onStickyChange callback you can do your js stuff when the element is stuck or not.

import { StickySpy } from 'react-sticky-spy'

const MyPage = () => (
  <div style={{ overflow: 'auto' }}>
    <StickySpy>
      <h1 style={{ position: 'sticky', top: 0 }}>Position sticky title</h1>
    </StickySpy>
    ...
  <div>
)
h1[data-react-is-sticky="true"] {
  border-bottom: 1px solid gray;
}

Warning The CSS for the sticky position is not included. Add your own style to the wrapped element.

API Reference

export type StickySpyProps = PropsWithChildren<{
  /**
   * Set a custom name for the attribute
   * @default "data-react-is-sticky"
   */
  attribute?: string;
  /**
   * Callback function that is called when the sticky element changes
   * @param isSticky Current state of the sticky element
   */
  onStickyChange?: (isSticky: boolean) => void;
}>

About

Super minimal ~400byte css-free react component that detect and add a custom attribute to a position: sticky element when it is stuck inside the scrolling container.

https://react-sticky-spy.stackblitz.io


Languages

Language:TypeScript 86.7%Language:HTML 13.3%