npx axionjs-ui add hook use-virtual-list

function DynamicHeightList() {
  // Items with different content lengths
  const items = Array.from({ length: 500 }, (_, i) => ({
    id: i,
    title: `Item ${i}`,
    description: `Description that might be ${i % 3 === 0 ? 'short' : 
      i % 3 === 1 ? 'medium length with a bit more text here' : 
      'quite long and detailed, spanning multiple lines potentially. This is a really lengthy description to demonstrate how a larger item might look in our virtualized list.'}`,
  }));
  
  // Reference to measure rendered items
  const itemHeights = useRef<Record<number, number>>({});
  
  // Get or estimate item height
  const getItemHeight = (index: number, item: typeof items[0]) => {
    // Return known height if we've measured it
    if (itemHeights.current[index]) {
      return itemHeights.current[index];
    }
    
    // Estimate based on content length
    const baseHeight = 80;
    const descriptionLength = item.description.length;
    
    if (descriptionLength < 50) return baseHeight;
    if (descriptionLength < 200) return baseHeight + 40;
    return baseHeight + 80;
  };
  
  // Callback ref to measure actual heights after render
  const measureRef = useCallback((index: number) => (element: HTMLElement | null) => {
    if (element) {
      const height = element.getBoundingClientRect().height;
      if (height !== itemHeights.current[index]) {
        itemHeights.current[index] = height;
        // Force a re-render if height changed
        forceUpdate();
      }
    }
  }, []);
  
  // Use virtual list with dynamic heights
  const { virtualItems, totalHeight } = useVirtualList(items, {
    itemHeight: getItemHeight,
    overscan: 5,
  });
  
  return (
    <div style={{ height: "500px", overflow: "auto" }}>
      <div style={{ height: `${totalHeight}px`, position: "relative" }}>
        {virtualItems.map(virtualItem => (
          <div
            key={virtualItem.index}
            ref={measureRef(virtualItem.index)}
            style={{
              position: "absolute",
              top: 0,
              transform: `translateY(${virtualItem.start}px)`,
              width: "100%",
              padding: "8px",
            }}
          >
            <div className="item-content">
              <h3>{virtualItem.item.title}</h3>
              <p>{virtualItem.item.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function InfiniteVirtualList() {
  const [items, setItems] = useState<Array<{ id: number; text: string }>>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  
  // Load initial batch
  useEffect(() => {
    loadMoreItems();
  }, []);
  
  // Function to load more items
  const loadMoreItems = useCallback(async () => {
    if (isLoading || !hasMore) return;
    
    setIsLoading(true);
    
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 800));
    
    // Add new items
    const startIndex = items.length;
    const newItems = Array.from({ length: 50 }, (_, i) => ({
      id: startIndex + i,
      text: `Item ${startIndex + i}`,
    }));
    
    setItems(prev => [...prev, ...newItems]);
    setIsLoading(false);
    
    // Stop after 1000 items for this example
    if (items.length + newItems.length >= 1000) {
      setHasMore(false);
    }
  }, [items.length, isLoading, hasMore]);
  
  // Use virtual list hook
  const { virtualItems, totalHeight } = useVirtualList(items, { 
    itemHeight: 60,
    overscan: 10,
  });
  
  // Reference for intersection observer
  const loaderRef = useRef(null);
  
  // Set up intersection observer for infinite loading
  useEffect(() => {
    if (!loaderRef.current) return;
    
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && hasMore && !isLoading) {
          loadMoreItems();
        }
      },
      { threshold: 0.1 }
    );
    
    observer.observe(loaderRef.current);
    return () => observer.disconnect();
  }, [loadMoreItems, hasMore, isLoading]);
  
  return (
    <div style={{ height: "500px", overflow: "auto" }}>
      <div style={{ height: `${totalHeight}px`, position: "relative" }}>
        {virtualItems.map(virtualItem => (
          <div
            key={virtualItem.index}
            style={{
              position: "absolute",
              top: 0,
              transform: `translateY(${virtualItem.start}px)`,
              width: "100%",
              height: "60px",
              padding: "0 16px",
              display: "flex",
              alignItems: "center",
              borderBottom: "1px solid #eee",
            }}
          >
            <div>{virtualItem.item.text}</div>
          </div>
        ))}
      </div>
      
      {/* Loader element at the end */}
      <div 
        ref={loaderRef}
        style={{ 
          height: "60px", 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center",
          position: "relative",
          top: totalHeight,
        }}
      >
        {isLoading ? "Loading more items..." : hasMore ? "Scroll for more" : "End of list"}
      </div>
    </div>
  );
}

// Store scroll position before navigating away
const handleNavigate = () => {
  sessionStorage.setItem('listScrollPos', container.current.scrollTop.toString());
  navigate('/other-page');
};
 
// Restore when component mounts
useEffect(() => {
  const savedScrollPos = sessionStorage.getItem('listScrollPos');
  if (savedScrollPos && container.current) {
    container.current.scrollTop = parseInt(savedScrollPos, 10);
  }
}, []);

// Scroll to item with index 50, centered in the viewport
scrollToIndex(50, { align: 'center' });

// Use a separate state manager for form values
const formValues = useRef<Record<string, any>>({});
 
// In the virtual item render function
const handleChange = (id, value) => {
  formValues.current[id] = value;
};
 
// When rendering the input
<input 
  value={formValues.current[virtualItem.item.id] || ''} 
  onChange={(e) => handleChange(virtualItem.item.id, e.target.value)}
/>