@modern-kit/react/dist/components/Delay/index.mjs.map

modern-kit/react

{"version":3,"file":"index.mjs","sources":["../../../src/components/Delay/index.tsx"],"sourcesContent":["import { useTimeout } from '../../hooks/useTimeout';\nimport React, { useState } from 'react';\n\ninterface DelayProps {\n  children: React.ReactNode;\n  delay: number;\n  fallback?: React.ReactNode;\n}\n\n/**\n * @description 지정된 시간이 지난 후에 자식 컴포넌트를 렌더링하는 컴포넌트입니다.\n * 지연 시간 동안에는 fallback 컴포넌트가 렌더링됩니다.\n *\n * @param {DelayProps} props - 컴포넌트 속성\n * @param {React.ReactNode} props.children - 지연 후 렌더링할 자식 컴포넌트\n * @param {number} props.delay - 지연 시간 (밀리초)\n * @param {React.ReactNode} props.fallback - 지연 시간 동안 표시할 대체 컴포넌트\n *\n * @example\n * ```tsx\n * <Delay delay={1000} fallback={<Fallback />}>\n *   <Component />\n * </Delay>\n * ```\n */\nexport const Delay = ({ children, delay, fallback }: DelayProps) => {\n  const [isReady, setIsReady] = useState(() => delay <= 0);\n\n  useTimeout(() => setIsReady(true), delay);\n\n  return <>{isReady ? children : fallback}</>;\n};\n"],"names":[],"mappings":";;;;;;AAyBO,MAAM,QAAQ,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,UAAS,KAAkB;AAClE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,IAAI,QAAA,CAAS,MAAM,SAAS,CAAC,CAAA;AAEvD,EAAA,UAAA,CAAW,MAAM,UAAA,CAAW,IAAI,CAAA,EAAG,KAAK,CAAA;AAExC,EAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,OAAA,GAAU,QAAA,GAAW,QAAA,EAAS,CAAA;AAC1C;;;;"}