@bentoo/react-lazy

import React from 'react';
import { LazyComponent } from '@bentoo/react-lazy';

export default function App() {
  return (
    <div>
      <h1>My content</h1>
      <LazyComponent fallback={<h2>Loading...</h2>}>
        <img src="/myPicture.png" alt="MyPicture" />
      </LazyComponent>
    </div>
  );
}

import { LazyImage } from '@bentoo/react-lazy';
// For Next.js, pass ImageComponent={NextImage}

<LazyImage
  src="/photo.jpg"
  alt="My Photo"
  width={600}
  height={400}
  placeholder="/photo-low.jpg"
  blur
/>

import { lazy } from 'react';
import { LazySuspense } from '@bentoo/react-lazy';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

export default function App() {
  return (
    <LazySuspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </LazySuspense>
  );
}

import { useRef } from 'react';
import { useLazy, useLazyCallback } from '@bentoo/react-lazy';

export default function Section() {
  // returns { ref, visible }
  const { ref, visible } = useLazy<HTMLDivElement>({ triggerOnce: true });

  // returns { ref } and calls back when visible
  const { ref: cbRef } = useLazyCallback({
    onVisible: () => console.log('Element is now visible!'),
    triggerOnce: true
  });

  return (
    <div>
      <div ref={ref}>{visible ? 'in view' : 'not yet'}</div>
      <div ref={cbRef}>Watch me appear!</div>
    </div>
  );
}

import { useState } from 'react';
import { LazySentinel } from '@bentoo/react-lazy';

const PAGE = 20;
const TOTAL = 100;

export default function InfiniteList() {
  const [items, setItems] = useState(Array.from({ length: PAGE }, (_, i) => i));
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);

  async function loadMore() {
    if (loading || done) return;
    setLoading(true);
    await new Promise((r) => setTimeout(r, 500));
    setItems((prev) => [...prev, ...Array.from({ length: PAGE }, (_, i) => prev.length + i)]);
    setDone(items.length + PAGE >= TOTAL);
    setLoading(false);
  }

  return (
    <div>
      {items.map((i) => <div key={i}>Item {i}</div>)}
      {!done && (
        <LazySentinel onVisible={loadMore} triggerOnce={false} rootMargin="200px" />
      )}
      {loading && <div>Loading...</div>}
    </div>
  );
}

import { useRef } from 'react';
import { useVirtualizer } from '@bentoo/react-lazy/virtual';

function MyList({ count = 1000 }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count,
    getScrollElement: () => parentRef.current,
    itemSize: 50,
    overscan: 2,
  });

  return (
    <div ref={parentRef} style={{ height: 400, overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map((item) => (
          <div
            key={item.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: item.size,
              transform: `translateY(${item.start}px)`,
            }}
          >
            Item {item.index}
          </div>
        ))}
      </div>
    </div>
  );
}

import { VirtualList } from '@bentoo/react-lazy/virtual';

function App() {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);

  return (
    <VirtualList
      items={items}
      itemSize={50}
      renderItem={(item) => <div>{item}</div>}
      style={{ height: 400 }}
    />
  );
}

import Image from 'next/image';
import { LazyImage } from '@bentoo/react-lazy';

export default function NextApp() {
  return (
    <LazyImage
      ImageComponent={Image}
      src="/photo.jpg"
      alt="Next.js Image"
      width={600}
      height={400}
      placeholder="/photo-low.jpg"
      blur
    />
  );
}