Delay

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

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

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface DelayProps {
  children: React.ReactNode;
  delay: number;
  fallback?: React.ReactNode;
}

typescript

const Delay: ({ children, delay, fallback }: DelayProps) => JSX.Element;

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이 렌더링됩니다.