react-sticky-kit 0.1.3 → 0.1.5

package/README.md

@@ -40,7 +40,9 @@ pnpm add react-sticky-kit
 
 ```tsx
 import { StickyContainer, StickyItem } from 'react-sticky-kit';
-import 'react-sticky-kit/dist/style.css'; // Import styles for sticky components
+// !! Import styles for sticky components
+import 'react-sticky-kit/dist/style.css';
+// or `import 'react-sticky-kit/style';` for more clean style path(require modern bundler tools)
 
 export default function Example() {
   return (
@@ -72,7 +74,7 @@ export default function Example() {
 ### `<StickyItem />`
 | Prop    | Type                                 | Default | Description                                 |
 |---------|--------------------------------------|---------|---------------------------------------------|
-| `mode`  | `'replace' \| 'stack' \| 'none'`     |         | Sticky mode for this item (overrides group) |
+| `mode`  | `'replace' \| 'stack' \| 'none'`     |         | Sticky mode for this item (overrides StickyContainer) |
 
 ## Sticky Modes
 - **replace**: Only one sticky item is visible at a time, replacing the previous.
@@ -88,7 +90,11 @@ pnpm install
 pnpm dev
 ```
 
-Open [http://localhost:5173](http://localhost:5173) and switch between demo pages to explore all features and edge cases.
+Open [http://localhost:5173](http://localhost:5173) and switch between demo pages to explore all features and edge cases:
+* [iOS Contact](http://localhost:5173/#ios-contact) a dead simple iOS contact clone
+* [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)
 
 ## License
 

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export declare interface IStickyContainerProps extends default_2.HTMLAttributes<
 export declare interface IStickyItemProps extends default_2.HTMLAttributes<HTMLDivElement> {
     children: default_2.ReactNode;
     /**
-     * Sticky mode for this item. Defaults to the group's mode if not specified.
+     * Sticky mode for this item. Defaults to the StickyContainer's mode if not specified.
      */
     mode?: IStickyMode;
 }

package/dist/react-sticky.es.js

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

package/dist/react-sticky.umd.js

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

package/dist/style.css

@@ -1 +1 @@
-.oe-sticky-container,.oe-sticky-item{position:relative}.oe-sticky-content{will-change:top,position}.oe-sticky-content.is-sticky{position:fixed}
+.oe-sticky-container{position:relative}.oe-sticky-container.can-sticky .oe-sticky-content.is-sticky{position:fixed}.oe-sticky-item{position:relative}.oe-sticky-content{will-change:top,position}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sticky-kit",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description": "A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.",
   "keywords": [
@@ -39,7 +39,9 @@
       "import": "./dist/react-sticky.es.js",
       "require": "./dist/react-sticky.umd.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./style": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css"
   },
   "peerDependencies": {
     "react": ">=17.0.0",