Delay

이 컴포넌트는 두 가지 방식으로 사용할 수 있습니다.

children에 delay를 적용하여 노출 시점을 지연시키거나,
children이 render prop일 경우 delay된 시점에 플래그를 전달합니다.

props.ms

1. children이 노출되는 시점을 지연

이 컴포넌트는 children이 노출되는 시점을 ms만큼 지연시킵니다. 아래와 같은 코드에서는 200ms만큼 children 노출이 지연됩니다.


import { Delay } from '@suspensive/react'
 
export const Example = () => {
  return (
    <Delay ms={200}>
      <Delayed />
    </Delay>
  )
}

import { Delay } from '@suspensive/react'

export const Example = () => (
  <Delay ms={1000}>
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      1s delayed Text
    </div>
  </Delay>
)

Open Sandbox

2. children에 지연된 플래그를 전달하기

children이 render prop이라면 노출을 제어하지 않고 플래그를 전달합니다. 아래와 같은 코드에서는 200ms 뒤에 isDelayed가 true로 전달됩니다.


import { Delay } from '@suspensive/react'
 
export const Example = () => {
  return (
    <Delay ms={200}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,,
            transition: 'opacity 1500ms',
          }}
        ></div>
      )}
    </Delay>
  )
}

import { Delay } from '@suspensive/react'

export const Example = () => (
  <div style={{ backgroundColor: 'lightblue' }}>
    <Delay ms={1500}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,
            transition: 'opacity 1500ms',
          }}
        >
          1500ms opacity trigger
        </div>
      )}
    </Delay>
  </div>
)

Open Sandbox

로딩 UI가 지연되어 노출되는 것이 때에 따라 더 좋은 사용성을 제공합니다.


import { Delay, Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense
    fallback={
      <Delay ms={200}>
        <Skeleton />
      </Delay>
    }
  >
    ...
  </Suspense>
)

💡

Default ms

<Delay/>는 <DefaultPropsProvider/>와 함께 사용할 때 더욱 강력해집니다. <DefaultPropsProvider/>를 사용하여 여러 <Delay/> default ms를 제어합니다. 자세한 내용은 <DefaultPropsProvider/> 페이지에 소개되어 있습니다.

props.fallback

delay된 children 노출 전까지 보여줄 수 있는 fallback입니다.


import { Delay } from '@suspensive/react'
 
const Example = () => (
  <Delay ms={200} fallback={<>Fallback Text</>}>
    200ms delayed Text
  </Delay>
)

import { Delay } from '@suspensive/react'

export const Example = () => {
  return (
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      <Delay ms={1000} fallback={<>Fallback Text</>}>
        1s delayed Text
      </Delay>
    </div>
  )
}

Open Sandbox