본문으로 건너뛰기

Delay

지정된 시간이 지난 후에 자식 컴포넌트를 렌더링하는 컴포넌트입니다.

지연 시간 동안에는 fallback 컴포넌트가 렌더링됩니다.


Code​

🔗 실제 구현 코드 확인


Interface​

typescript
interface DelayProps {
  children: React.ReactNode;
  delay: number;
  fallback?: React.ReactNode;
}
typescript
const Delay: ({ children, delay, fallback }: DelayProps) => JSX.Element;

Props​

NameTypeDefaultDescription
childrenReact.ReactNode-지연 후 렌더링할 자식 컴포넌트
delaynumber-렌더링 지연 시간 (ms)
fallbackReact.ReactNodeundefined지연 시간 동안 렌더링할 컴포넌트

Usage​

typescript
import { Delay } from '@modern-kit/react'

const Example = () => {
  return (
    <Delay
      delay={2000}
      fallback={
        <div>
          fallback입니다. 2초 뒤에 children이 렌더링됩니다.
        </div>
      }>
      <div>children입니다.</div>
    </Delay>
  );
};

Example​

fallback입니다. 2초 뒤에 children이 렌더링됩니다.