FallbackLazyImage

LazyImage 컴포넌트 를 확장해 이미지 load 여부에 따른 Fallback 컴포넌트를 렌더링 하는 컴포넌트 입니다.

src와 더불어 width, height, fallback props를 필수로 넘겨줘야 하며, fallback의 크기는 해당 width, height와 동일하게 맞추는 것을 권장합니다.

duration props는 실제 이미지가 load 된 후, fallback 컴포넌트에서 실제 이미지로 전환 될 때 사용하는 transition-duration 값입니다.

Code

Interface

typescript
interface IntersectionObserverInit {
  root?: Element | Document | null;
  rootMargin?: string;
  threshold?: number | number[];
}

interface LazyImageProps
  extends React.ComponentProps<'img'>,
    IntersectionObserverInit {
  src: string;
}

typescrpt
interface FallbackLazyImageProps extends LazyImageProps {
  fallback: JSX.Element;
  width: string | number;
  height: string | number;
  duration?: CSSProperties['transitionDuration']; // default: 0.2s
}

const FallbackLazyImage: React.ForwardRefExoticComponent<
  Omit<FallbackLazyImageProps, 'ref'> & React.RefAttributes<HTMLImageElement>
>;

Usage

Default

typescript
import { FallbackLazyImage } from '@modern-kit/react';
import img1 from '../assets/img1.png';

const Example = () => {
  const skeletonStyle = useMemo(
    () => ({
      width: '400px', // 실제 img 크기와 동일하게 맞춰주세요.
      height: '400px', // 실제 img 크기와 동일하게 맞춰주세요.
      backgroundColor: 'green',
    }),
    []
  );
  return (
    <div>
      <FallbackLazyImage
        fallback={<div style={skeletonStyle} />}
        width={400}
        height={400}
        src={img1}
        alt="img1"
      />
    </div>
  );
};

Wrapper Styling: css

FallbackLazyImage 컴포넌트 내 Image Wrapper는 기본적으로 lazy-image-wrapper 클래스를 갖습니다. 해당 클래스를 활용하여 스타일을 제어 할 수 있습니다.

/* css stylesheet */
.lazy-image-wrapper {
  border-radius: 12px;
  overflow: hidden;
}

.lazy-image-wrapper > img {
  /* image styling */
}

<FallbackLazyImage {/* ...props */} />

Wrapper Styling: css-in-js

css-in-js의 상속기능을 활용하여 새로운 컴포넌트를 작성 할 수 있습니다.

const Image = styled(FallbackLazyImage)`
  border-radius: 12px;
  overflow: hidden;

  & > img {
    /* image styling */
  }
`;

<Image {/* ...props */} />

Example

스크롤 해주세요.

Code​

Interface​

Usage​

Default​

Wrapper Styling: css​

Wrapper Styling: css-in-js​

Example​