react-sticky-kit 0.1.5 → 0.1.6

package/README.md

@@ -4,15 +4,24 @@
   <a href="https://www.npmjs.com/package/react-sticky-kit" target="_blank">
     <img src="https://img.shields.io/npm/v/react-sticky-kit.svg?style=flat-square" alt="NPM Version" />
   </a>
+  <a href="https://img.shields.io/npm/dm/react-sticky-kit?style=flat-square" target="_blank">
+    <img src="https://img.shields.io/npm/dm/react-sticky-kit?style=flat-square" alt="NPM Downloads" />
+  </a>
   <a href="https://github.com/oe/react-sticky-kit" target="_blank">
     <img src="https://img.shields.io/github/stars/oe/react-sticky-kit?style=flat-square" alt="GitHub Stars" />
   </a>
   <a href="https://github.com/oe/react-sticky-kit/actions" target="_blank">
-    <img src="https://github.com/oe/react-sticky-kit/actions/workflows/ci.yml/badge.svg" alt="Build Status" />
+    <img src="https://img.shields.io/github/actions/workflow/status/oe/react-sticky-kit/ci.yml?style=flat-square" alt="Build Status" />
   </a>
   <a href="https://github.com/oe/react-sticky-kit/blob/main/LICENSE" target="_blank">
     <img src="https://img.shields.io/github/license/oe/react-sticky-kit?style=flat-square" alt="License" />
   </a>
+  <a href="https://www.typescriptlang.org/" target="_blank">
+    <img src="https://img.shields.io/badge/TypeScript-5.0%2B-blue?logo=typescript&style=flat-square" alt="TypeScript" />
+  </a>
+  <a href="#ssr-ssg-support" target="_blank">
+    <img src="https://img.shields.io/badge/SSR%2FSSG-Compatible-brightgreen?style=flat-square" alt="SSR/SSG Compatible" />
+  </a>
 </p>
 
 A lightweight, flexible React sticky container and item component library. Easily create sticky headers, sections, and advanced sticky layouts with support for multiple modes and edge cases.
@@ -22,6 +31,7 @@ A lightweight, flexible React sticky container and item component library. Easil
 - 📦 Simple API: `<StickyContainer>` and `<StickyItem>`
 - 🧩 Supports `replace`, `stack`, and `none` sticky modes
 - 🏷️ Customizable offset, z-index (baseZIndex), and sticky logic
+- 🔄 Supports SSR/SSG (Next.js, Gatsby, Astro, etc.)
 - 🧪 Handles edge cases: empty sections, dynamic heights, zero-height headers, long headers, etc.
 - ⚡️ Written in TypeScript, fully typed
 - 🧪 Includes demo pages for real-world scenarios
@@ -36,6 +46,9 @@ yarn add react-sticky-kit
 pnpm add react-sticky-kit
 ```
 
+## Demo
+- [Apple iOS Contact App](https://codesandbox.io/p/sandbox/dreamy-hofstadter-v9dzfz)
+
 ## Usage
 
 ```tsx
@@ -95,6 +108,52 @@ Open [http://localhost:5173](http://localhost:5173) and switch between demo page
 * [Mixed mode](http://localhost:5173/#mixed-mode) mix replace/stack/none mode
 * [Nested](http://localhost:5173/#dynamic-height) nest sticky containers
 * [Dynamic sticky items](http://localhost:5173/#nested) dynamic sticky items(add/remove)
+* [Dynamic offsetTop](http://localhost:5173/#dynamic-offset) dynamic offsetTop that adapts to header height changes
+
+## SSR/SSG Support
+
+React Sticky Kit supports Server-Side Rendering (SSR) and Static Site Generation (SSG), working seamlessly with frameworks like Next.js, Gatsby, Astro, and more.
+
+### Next.js Example
+
+```tsx
+// pages/index.tsx
+import { StickyContainer, StickyItem } from 'react-sticky-kit'
+import 'react-sticky-kit/dist/style.css'
+
+export default function Home() {
+  return (
+    <StickyContainer>
+      <StickyItem>
+        <header>Sticky Header</header>
+      </StickyItem>
+      <main>Content...</main>
+    </StickyContainer>
+  )
+}
+```
+
+### Astro Example
+
+```astro
+---
+// src/pages/index.astro
+import { StickyContainer, StickyItem } from 'react-sticky-kit'
+import 'react-sticky-kit/dist/style.css'
+---
+
+<html>
+  <head>...</head>
+  <body>
+    <StickyContainer client:load>
+      <StickyItem>
+        <header>Sticky Header</header>
+      </StickyItem>
+      <div>Content...</div>
+    </StickyContainer>
+  </body>
+</html>
+```
 
 ## License
 

package/dist/react-sticky.es.js

@@ -1,66 +1,62 @@
 import { jsx as R } from "react/jsx-runtime";
-import { createContext as b, useContext as T, useRef as S, useState as Z, useEffect as E, useCallback as w, useMemo as L } from "react";
-const x = 20, N = 200, $ = b(null);
+import { createContext as b, useContext as Z, useRef as h, useState as L, useEffect as E, useCallback as w, useMemo as N } from "react";
+const x = 20, T = 200, $ = b(null);
 function _() {
-  return T($);
+  return Z($);
 }
-function M({ mode: c, children: o, className: p, ...k }) {
-  const e = _(), C = S(null), I = S(null), [r, t] = Z(!1), n = S({
+function F({ mode: u, children: f, className: g, ...k }) {
+  const e = _(), S = h(null), I = h(null), [r, m] = L(!1), t = h({
     fixedOffsetTop: (e == null ? void 0 : e.fixedOffsetTop) || 0,
     isSticky: r,
     baseZIndex: (e == null ? void 0 : e.baseZIndex) || x
   });
-  return n.current.baseZIndex = (e == null ? void 0 : e.baseZIndex) || x, n.current.fixedOffsetTop = (e == null ? void 0 : e.fixedOffsetTop) || 0, n.current.isSticky = r, E(() => {
-    const u = I.current, f = C.current, a = c || (e == null ? void 0 : e.mode);
-    if (!e || !f || !u || a === "none" || !a || !e.register) {
-      t(!1);
+  return t.current.baseZIndex = (e == null ? void 0 : e.baseZIndex) || x, t.current.fixedOffsetTop = (e == null ? void 0 : e.fixedOffsetTop) || 0, t.current.isSticky = r, E(() => {
+    const n = I.current, a = S.current, l = u || (e == null ? void 0 : e.mode);
+    if (!e || !a || !n || l === "none" || !l || !e.register) {
+      m(!1);
       return;
     }
-    const l = {
-      el: f,
-      update: (d, i, y, m, H) => {
-        if (!d)
-          return n.current.isSticky && t(!1), 0;
-        if (i <= y) {
-          const h = u.getBoundingClientRect().height;
-          let v = y;
-          if (a === "replace" && typeof m < "u") {
-            const g = m - (y + h);
-            if (g < 0 && (v = y + g, g + h < 0))
-              return n.current.isSticky && t(!1), 0;
-          }
-          return f.style.height = `${h}px`, n.current.isSticky || t(!0), u.style.top = `${v}px`, u.style.width = `${f.offsetWidth}px`, u.style.zIndex = `${n.current.baseZIndex + (a === "replace" ? -H : H)}`, a === "replace" ? 0 : h;
-        } else
-          t(!1);
-        return 0;
+    const s = {
+      el: a,
+      update: (d, c, i, o, C) => {
+        if (!d || c > i)
+          return t.current.isSticky && m(!1), 0;
+        const p = n.getBoundingClientRect().height;
+        let H = i;
+        if (l === "replace" && typeof o < "u") {
+          const y = o - (i + p);
+          if (y < 0 && (H = i + y, y + p < 0))
+            return t.current.isSticky && m(!1), 0;
+        }
+        return a.style.height = `${p}px`, t.current.isSticky || m(!0), n.style.top = `${H}px`, n.style.width = `${a.offsetWidth}px`, n.style.zIndex = `${t.current.baseZIndex + (l === "replace" ? -C : C)}`, l === "replace" ? 0 : p;
       }
     };
-    return e.register(l);
-  }, [e == null ? void 0 : e.mode, e == null ? void 0 : e.register, c]), E(() => {
-    const u = C.current, f = I.current, a = e == null ? void 0 : e.updateStickyItemsHeight;
-    if (!r || !u || !f || !a)
+    return e.register(s);
+  }, [e == null ? void 0 : e.mode, e == null ? void 0 : e.register, u]), E(() => {
+    const n = S.current, a = I.current, l = e == null ? void 0 : e.updateStickyItemsHeight;
+    if (!r || !n || !a || !l)
       return;
-    const s = a(f.getBoundingClientRect().height);
+    const v = l(a.getBoundingClientRect().height);
     return () => {
-      O(u, ["height"]), O(f, ["top", "z-index", "width"]), s();
+      O(n, ["height"]), O(a, ["top", "z-index", "width"]), v();
     };
-  }, [r, e == null ? void 0 : e.updateStickyItemsHeight]), /* @__PURE__ */ R("div", { className: "oe-sticky-item " + (p || ""), ...k, ref: C, children: /* @__PURE__ */ R("div", { className: "oe-sticky-content " + (r ? "is-sticky" : ""), ref: I, children: o }) });
+  }, [r, e == null ? void 0 : e.updateStickyItemsHeight]), /* @__PURE__ */ R("div", { className: "oe-sticky-item " + (g || ""), ...k, ref: S, children: /* @__PURE__ */ R("div", { className: "oe-sticky-content " + (r ? "is-sticky" : ""), ref: I, children: f }) });
 }
-function O(c, o) {
-  o.forEach((p) => {
-    c.style.removeProperty(p);
+function O(u, f) {
+  f.forEach((g) => {
+    u.style.removeProperty(g);
   });
 }
-function P({
-  children: c,
-  offsetTop: o = 0,
-  baseZIndex: p,
+function M({
+  children: u,
+  offsetTop: f = 0,
+  baseZIndex: g,
   onStickyItemsHeightChange: k,
   defaultMode: e = "replace",
-  ...C
+  ...S
 }) {
-  const I = S(null), r = S([]), t = S({
-    fixedOffsetTop: o,
+  const I = h(null), r = h([]), m = h(null), t = h({
+    fixedOffsetTop: f,
     defaultMode: e,
     stickyItemsHeight: 0,
     onStickyItemsHeightChange: k,
@@ -69,77 +65,78 @@ function P({
   t.current.onStickyItemsHeightChange = k;
   const n = w(() => {
     const s = I.current;
-    if (!s)
-      return;
-    const l = s.getBoundingClientRect(), d = t.current, i = d.fixedOffsetTop, y = d.stickyItemsHeight, m = !(l.top > i || l.bottom < i);
-    if (!m) {
-      t.current.lastCanSticky !== m && (s.classList.toggle("can-sticky", !1), r.current.forEach((g) => g.update(!1, 0, 0, 0, 0)), t.current.lastCanSticky = m);
-      return;
-    }
-    t.current.lastCanSticky = m, y > 0 && s.classList.toggle("can-sticky", !0);
-    let H = i, h = l.bottom - (i + y);
-    h > 0 && (h = 0);
-    const v = r.current.map((g) => g.el.getBoundingClientRect().top);
-    r.current.forEach((g, B) => {
-      H += g.update(m, v[B], H + h, v[B + 1], B);
-    });
-  }, []), u = w((s) => {
-    const l = t.current.stickyItemsHeight + s;
-    return t.current.stickyItemsHeight = l, setTimeout(() => {
-      var d, i;
-      (i = (d = t.current).onStickyItemsHeightChange) == null || i.call(d, l);
+    !s || m.current || (m.current = requestAnimationFrame(() => {
+      m.current = null;
+      const d = s.getBoundingClientRect(), { fixedOffsetTop: c, stickyItemsHeight: i } = t.current, o = !(d.top > c || d.bottom < c);
+      if (!o) {
+        t.current.lastCanSticky !== o && (s.classList.toggle("can-sticky", !1), r.current.forEach((y) => y.update(!1, 0, 0, 0, 0)), t.current.lastCanSticky = o);
+        return;
+      }
+      t.current.lastCanSticky = o, i > 0 && s.classList.toggle("can-sticky", !0);
+      let C = c, p = d.bottom - (c + i);
+      p > 0 && (p = 0);
+      const H = r.current.map((y) => y.el.getBoundingClientRect().top);
+      r.current.forEach((y, B) => {
+        C += y.update(o, H[B], C + p, H[B + 1], B);
+      });
+    }));
+  }, []), a = w((s) => {
+    const d = t.current.stickyItemsHeight + s;
+    return t.current.stickyItemsHeight = d, setTimeout(() => {
+      var c, i;
+      (i = (c = t.current).onStickyItemsHeightChange) == null || i.call(c, d);
     }, 0), () => {
-      const d = t.current.stickyItemsHeight - s;
-      t.current.stickyItemsHeight = d, setTimeout(() => {
-        var i, y;
-        (y = (i = t.current).onStickyItemsHeightChange) == null || y.call(i, d);
+      const c = t.current.stickyItemsHeight - s;
+      t.current.stickyItemsHeight = c, setTimeout(() => {
+        var i, o;
+        (o = (i = t.current).onStickyItemsHeightChange) == null || o.call(i, c);
       }, 0);
     };
   }, []);
   E(() => {
-    t.current.fixedOffsetTop = o, t.current.defaultMode = e, setTimeout(() => {
+    t.current.fixedOffsetTop = f, t.current.defaultMode = e, setTimeout(() => {
       n();
     }, 10);
-  }, [o, e, n]);
-  const f = w((s) => (r.current.push(s), r.current = A(r.current), n(), () => {
-    r.current = r.current.filter((l) => l !== s), n();
+  }, [f, e, n]);
+  const l = w((s) => (r.current.push(s), r.current = z(r.current), n(), () => {
+    r.current = r.current.filter((d) => d !== s), n();
   }), [n]);
   E(() => (window.addEventListener("scroll", n, { passive: !0 }), window.addEventListener("resize", n, { passive: !0 }), () => {
     window.removeEventListener("scroll", n), window.removeEventListener("resize", n);
   }), [n]);
-  const a = L(() => z(p), [p]);
+  const v = N(() => A(g), [g]);
   return /* @__PURE__ */ R(
     $.Provider,
     {
       value: {
-        register: f,
-        baseZIndex: a,
-        updateStickyItemsHeight: u,
-        fixedOffsetTop: o,
+        register: l,
+        baseZIndex: v,
+        updateStickyItemsHeight: a,
+        fixedOffsetTop: f,
         mode: e
       },
       children: /* @__PURE__ */ R(
         "div",
         {
-          ...C,
+          ...S,
           ref: I,
           className: "oe-sticky-container",
-          children: c
+          children: u
         }
       )
     }
   );
 }
-function z(c) {
-  return typeof c > "u" ? N : Math.max(Number(c) || 0, x);
+function A(u) {
+  return typeof u > "u" ? T : Math.max(Number(u) || 0, x);
 }
-function A(c) {
-  return c.sort((o, p) => {
-    const k = o.el.getBoundingClientRect(), e = p.el.getBoundingClientRect();
+function z(u) {
+  return u.sort((f, g) => {
+    const k = f.el.getBoundingClientRect(), e = g.el.getBoundingClientRect();
     return k.top - e.top;
   });
 }
 export {
-  P as StickyContainer,
-  M as StickyItem
+  M as StickyContainer,
+  F as StickyItem
 };

package/dist/react-sticky.umd.js

@@ -1 +1 @@
-(function(g,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],k):(g=typeof globalThis<"u"?globalThis:g||self,k(g.ReactSticky={},g.jsxRuntime,g.React))})(this,function(g,k,s){"use strict";const B=s.createContext(null);function N(){return s.useContext(B)}const $="";function O({mode:u,children:o,className:m,...E}){const e=N(),R=s.useRef(null),C=s.useRef(null),[i,t]=s.useState(!1),n=s.useRef({fixedOffsetTop:(e==null?void 0:e.fixedOffsetTop)||0,isSticky:i,baseZIndex:(e==null?void 0:e.baseZIndex)||20});return n.current.baseZIndex=(e==null?void 0:e.baseZIndex)||20,n.current.fixedOffsetTop=(e==null?void 0:e.fixedOffsetTop)||0,n.current.isSticky=i,s.useEffect(()=>{const f=C.current,l=R.current,d=u||(e==null?void 0:e.mode);if(!e||!l||!f||d==="none"||!d||!e.register){t(!1);return}const a={el:l,update:(y,c,p,I,H)=>{if(!y)return n.current.isSticky&&t(!1),0;if(c<=p){const S=f.getBoundingClientRect().height;let _=p;if(d==="replace"&&typeof I<"u"){const h=I-(p+S);if(h<0&&(_=p+h,h+S<0))return n.current.isSticky&&t(!1),0}return l.style.height=`${S}px`,n.current.isSticky||t(!0),f.style.top=`${_}px`,f.style.width=`${l.offsetWidth}px`,f.style.zIndex=`${n.current.baseZIndex+(d==="replace"?-H:H)}`,d==="replace"?0:S}else t(!1);return 0}};return e.register(a)},[e==null?void 0:e.mode,e==null?void 0:e.register,u]),s.useEffect(()=>{const f=R.current,l=C.current,d=e==null?void 0:e.updateStickyItemsHeight;if(!i||!f||!l||!d)return;const r=d(l.getBoundingClientRect().height);return()=>{x(f,["height"]),x(l,["top","z-index","width"]),r()}},[i,e==null?void 0:e.updateStickyItemsHeight]),k.jsx("div",{className:"oe-sticky-item "+(m||""),...E,ref:R,children:k.jsx("div",{className:"oe-sticky-content "+(i?"is-sticky":""),ref:C,children:o})})}function x(u,o){o.forEach(m=>{u.style.removeProperty(m)})}function T({children:u,offsetTop:o=0,baseZIndex:m,onStickyItemsHeightChange:E,defaultMode:e="replace",...R}){const C=s.useRef(null),i=s.useRef([]),t=s.useRef({fixedOffsetTop:o,defaultMode:e,stickyItemsHeight:0,onStickyItemsHeightChange:E,lastCanSticky:!1});t.current.onStickyItemsHeightChange=E;const n=s.useCallback(()=>{const r=C.current;if(!r)return;const a=r.getBoundingClientRect(),y=t.current,c=y.fixedOffsetTop,p=y.stickyItemsHeight,I=!(a.top>c||a.bottom<c);if(!I){t.current.lastCanSticky!==I&&(r.classList.toggle("can-sticky",!1),i.current.forEach(h=>h.update(!1,0,0,0,0)),t.current.lastCanSticky=I);return}t.current.lastCanSticky=I,p>0&&r.classList.toggle("can-sticky",!0);let H=c,S=a.bottom-(c+p);S>0&&(S=0);const _=i.current.map(h=>h.el.getBoundingClientRect().top);i.current.forEach((h,v)=>{H+=h.update(I,_[v],H+S,_[v+1],v)})},[]),f=s.useCallback(r=>{const a=t.current.stickyItemsHeight+r;return t.current.stickyItemsHeight=a,setTimeout(()=>{var y,c;(c=(y=t.current).onStickyItemsHeightChange)==null||c.call(y,a)},0),()=>{const y=t.current.stickyItemsHeight-r;t.current.stickyItemsHeight=y,setTimeout(()=>{var c,p;(p=(c=t.current).onStickyItemsHeightChange)==null||p.call(c,y)},0)}},[]);s.useEffect(()=>{t.current.fixedOffsetTop=o,t.current.defaultMode=e,setTimeout(()=>{n()},10)},[o,e,n]);const l=s.useCallback(r=>(i.current.push(r),i.current=b(i.current),n(),()=>{i.current=i.current.filter(a=>a!==r),n()}),[n]);s.useEffect(()=>(window.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n,{passive:!0}),()=>{window.removeEventListener("scroll",n),window.removeEventListener("resize",n)}),[n]);const d=s.useMemo(()=>Z(m),[m]);return k.jsx(B.Provider,{value:{register:l,baseZIndex:d,updateStickyItemsHeight:f,fixedOffsetTop:o,mode:e},children:k.jsx("div",{...R,ref:C,className:"oe-sticky-container",children:u})})}function Z(u){return typeof u>"u"?200:Math.max(Number(u)||0,20)}function b(u){return u.sort((o,m)=>{const E=o.el.getBoundingClientRect(),e=m.el.getBoundingClientRect();return E.top-e.top})}g.StickyContainer=T,g.StickyItem=O,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+(function(p,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],m):(p=typeof globalThis<"u"?globalThis:p||self,m(p.ReactSticky={},p.jsxRuntime,p.React))})(this,function(p,m,r){"use strict";const B=r.createContext(null);function x(){return r.useContext(B)}const $="";function Z({mode:o,children:l,className:h,...S}){const e=x(),C=r.useRef(null),E=r.useRef(null),[s,k]=r.useState(!1),t=r.useRef({fixedOffsetTop:(e==null?void 0:e.fixedOffsetTop)||0,isSticky:s,baseZIndex:(e==null?void 0:e.baseZIndex)||20});return t.current.baseZIndex=(e==null?void 0:e.baseZIndex)||20,t.current.fixedOffsetTop=(e==null?void 0:e.fixedOffsetTop)||0,t.current.isSticky=s,r.useEffect(()=>{const n=E.current,d=C.current,a=o||(e==null?void 0:e.mode);if(!e||!d||!n||a==="none"||!a||!e.register){k(!1);return}const c={el:d,update:(y,u,i,f,R)=>{if(!y||u>i)return t.current.isSticky&&k(!1),0;const I=n.getBoundingClientRect().height;let _=i;if(a==="replace"&&typeof f<"u"){const g=f-(i+I);if(g<0&&(_=i+g,g+I<0))return t.current.isSticky&&k(!1),0}return d.style.height=`${I}px`,t.current.isSticky||k(!0),n.style.top=`${_}px`,n.style.width=`${d.offsetWidth}px`,n.style.zIndex=`${t.current.baseZIndex+(a==="replace"?-R:R)}`,a==="replace"?0:I}};return e.register(c)},[e==null?void 0:e.mode,e==null?void 0:e.register,o]),r.useEffect(()=>{const n=C.current,d=E.current,a=e==null?void 0:e.updateStickyItemsHeight;if(!s||!n||!d||!a)return;const H=a(d.getBoundingClientRect().height);return()=>{N(n,["height"]),N(d,["top","z-index","width"]),H()}},[s,e==null?void 0:e.updateStickyItemsHeight]),m.jsx("div",{className:"oe-sticky-item "+(h||""),...S,ref:C,children:m.jsx("div",{className:"oe-sticky-content "+(s?"is-sticky":""),ref:E,children:l})})}function N(o,l){l.forEach(h=>{o.style.removeProperty(h)})}function b({children:o,offsetTop:l=0,baseZIndex:h,onStickyItemsHeightChange:S,defaultMode:e="replace",...C}){const E=r.useRef(null),s=r.useRef([]),k=r.useRef(null),t=r.useRef({fixedOffsetTop:l,defaultMode:e,stickyItemsHeight:0,onStickyItemsHeightChange:S,lastCanSticky:!1});t.current.onStickyItemsHeightChange=S;const n=r.useCallback(()=>{const c=E.current;!c||k.current||(k.current=requestAnimationFrame(()=>{k.current=null;const y=c.getBoundingClientRect(),{fixedOffsetTop:u,stickyItemsHeight:i}=t.current,f=!(y.top>u||y.bottom<u);if(!f){t.current.lastCanSticky!==f&&(c.classList.toggle("can-sticky",!1),s.current.forEach(g=>g.update(!1,0,0,0,0)),t.current.lastCanSticky=f);return}t.current.lastCanSticky=f,i>0&&c.classList.toggle("can-sticky",!0);let R=u,I=y.bottom-(u+i);I>0&&(I=0);const _=s.current.map(g=>g.el.getBoundingClientRect().top);s.current.forEach((g,v)=>{R+=g.update(f,_[v],R+I,_[v+1],v)})}))},[]),d=r.useCallback(c=>{const y=t.current.stickyItemsHeight+c;return t.current.stickyItemsHeight=y,setTimeout(()=>{var u,i;(i=(u=t.current).onStickyItemsHeightChange)==null||i.call(u,y)},0),()=>{const u=t.current.stickyItemsHeight-c;t.current.stickyItemsHeight=u,setTimeout(()=>{var i,f;(f=(i=t.current).onStickyItemsHeightChange)==null||f.call(i,u)},0)}},[]);r.useEffect(()=>{t.current.fixedOffsetTop=l,t.current.defaultMode=e,setTimeout(()=>{n()},10)},[l,e,n]);const a=r.useCallback(c=>(s.current.push(c),s.current=O(s.current),n(),()=>{s.current=s.current.filter(y=>y!==c),n()}),[n]);r.useEffect(()=>(window.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",n,{passive:!0}),()=>{window.removeEventListener("scroll",n),window.removeEventListener("resize",n)}),[n]);const H=r.useMemo(()=>w(h),[h]);return m.jsx(B.Provider,{value:{register:a,baseZIndex:H,updateStickyItemsHeight:d,fixedOffsetTop:l,mode:e},children:m.jsx("div",{...C,ref:E,className:"oe-sticky-container",children:o})})}function w(o){return typeof o>"u"?200:Math.max(Number(o)||0,20)}function O(o){return o.sort((l,h)=>{const S=l.el.getBoundingClientRect(),e=h.el.getBoundingClientRect();return S.top-e.top})}p.StickyContainer=b,p.StickyItem=Z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sticky-kit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.",
   "keywords": [
@@ -26,6 +26,9 @@
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint src demo --ext .ts,.tsx,.js,.jsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
     "pub": "tsx ./scripts/publish.ts"
   },
   "files": [
@@ -36,9 +39,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/react-sticky.es.js",
-      "require": "./dist/react-sticky.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/react-sticky.umd.js"
     },
     "./style": "./dist/style.css",
     "./dist/style.css": "./dist/style.css"
@@ -49,25 +52,33 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.4.3",
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^3.1.3",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jsdom": "^26.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.88.0",
+    "ts-node": "^10.9.2",
     "tsx": "^4.19.4",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.30.1",
     "vite": "^4.0.0",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.1.3"
   }
 }