useScrollCallback

import { useScrollCallback } from "@servicetitan/anvil2-ext-atlas";

function ScrollAwareComponent() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [showScrollToTop, setShowScrollToTop] = useState(false);

  useScrollCallback({
    element: containerRef.current,
    threshold: 100,
    onScrollDown: () => setShowScrollToTop(true),
    onScrollTop: () => setShowScrollToTop(false),
  });

  return (
    <div ref={containerRef} style={{ overflow: "auto", height: 400 }}>
      {/* Scrollable content */}
      {showScrollToTop && (
        <button onClick={() => scrollToTop()}>Back to Top</button>
      )}
    </div>
  );
}

import { useScrollCallback } from "@servicetitan/anvil2-ext-atlas";

function ChatWithCollapsibleHeader() {
  const contentRef = useRef<HTMLDivElement>(null);
  const [headerCollapsed, setHeaderCollapsed] = useState(false);

  useScrollCallback({
    element: contentRef.current,
    threshold: 50,
    onScrollDown: () => setHeaderCollapsed(true),
    onScrollTop: () => setHeaderCollapsed(false),
  });

  return (
    <div className="chat-container">
      <Header 
        title="Atlas" 
        className={headerCollapsed ? "collapsed" : ""} 
      />
      <div ref={contentRef} className="chat-content">
        {/* Messages */}
      </div>
    </div>
  );
}

import { useScrollCallback } from "@servicetitan/anvil2-ext-atlas";

function LazyImageGallery() {
  const galleryRef = useRef<HTMLDivElement>(null);
  const [imagesLoaded, setImagesLoaded] = useState(false);

  useScrollCallback({
    element: galleryRef.current,
    threshold: 200,
    onScrollDown: () => {
      if (!imagesLoaded) {
        loadHighResImages();
        setImagesLoaded(true);
      }
    },
  });

  return (
    <div ref={galleryRef} className="gallery">
      {images.map((img) => (
        <img 
          key={img.id} 
          src={imagesLoaded ? img.highRes : img.placeholder} 
        />
      ))}
    </div>
  );
}