Slacker

Slacker loads data when it enters the viewport. It combines Observer with a loader function and supports loading, error, and retry states.

function Slacker<T = any>(props: {
  loader: () => Promise<T> | T;
  children: (data: T) => React.ReactNode;
  loadingFallback?: React.ReactNode;
  errorFallback?: React.ReactNode | ((props: {
    error: Error;
    retry: () => void;
    isLoading: boolean;
  }) => React.ReactNode);
  threshold?: number | number[];
  rootMargin?: string;
  onError?: (error: Error) => void;
  maxRetries?: number;
  retryDelay?: number;
}): React.ReactElement;

Basic usage#

Provide a loader and render the loaded data in children once it becomes visible.

import { Slacker } from '@ilokesto/utilinent';

function UserProfile({ userId }) {
  return (
    <Slacker
      loader={() => fetch(`/api/users/${userId}`).then(r => r.json())}
      loadingFallback={<Spinner />}
      errorFallback={<ErrorMessage />}
    >
      {(user) => (
        <div>
          <h1>{user.name}</h1>
          <p>{user.email}</p>
        </div>
      )}
    </Slacker>
  );
}

Error handling & retries#

Use errorFallback, maxRetries, and retryDelay to handle failures gracefully.

<Slacker
  loader={fetchData}
  maxRetries={3}
  retryDelay={2000}
  loadingFallback={<Spinner />}
  errorFallback={({ error, retry }) => (
    <div>
      <p>오류: {error.message}</p>
      <button onClick={retry}>재시도</button>
    </div>
  )}
  onError={(err) => console.error('Failed to load:', err)}
>
  {(data) => <Content data={data} />}
</Slacker>