React Image Libs

The module of generated by vessel.

This project has been created by Vessel CLI. For a simple and quick reference about it, click here.

About

프론트엔드 프로젝트 개발에 사용되는 모듈들에 대해 집합적인 형태로 제공되는 패키지.

Installation

해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.

$ npm install --save @mornya/react-image-libs
or
$ yarn add @mornya/react-image-libs

Modules in the package

본 패키지에는 아래와 같은 모듈들을 포함한다. 제공되는 모듈과 메소드 사용법 등은 코드 스니핏을 참고한다.

ImageObserver module

IntersectionObserver를 활용하여 이미지 등의 객체가 뷰포트에 노출되는 시점에 이벤트 발생시켜주는 모듈

ImageObserver.Provider

초기화를 위한 프로바이더 클래스

class Provider {
  // 옵져버를 초기화 한다.
  // 옵션은 해당 타입(IntersectionObserverInit) 참고
  constructor(option?: IntersectionObserverInit) {}

  // HTML 엘리먼트를 구독하고 subscribeCallback 파라미터를 통해 해당 엘리먼트가 뷰포트에 노출될 때 콜백함수를 실행.
  // 이벤트 핸들러 해제를 위해 unsubscriber 함수를 리턴한다 (구독 해제시 해당 메소드를 실행하지 않으면 메모리 누수 발생).
  public subscribe<T extends Element>(target: T, subscribeCallback: Callback): Unsubscriber {}

  // 1회성으로 엘리먼트를 구독하며, 별도의 구독 해제가 필요하지 않음.
  public subscribeOnce<T extends Element>(target: T, subscribeCallback: Callback): void {}

  // HTML 엘리먼트에 대한 구독을 해제한다.
  public unsubscribe<T extends Element>(target: T): void {}

  // 옵져버 해제
  public destroy(): void {}
}

IntersectObserverContext module

LazyImage나 LazyBackground 등의 컴포넌트를 사용하기 위한 provider 및 context 제공. 프로바이더는 최상위 DOM에 (next.js의 _app.tsx 등) 선언되어져야 한다.

lib.dom.d.ts의 IntersectionObserverInit 타입 참고

const option: IntersectionObserverInit = { ... };

return () => {
  <IntersectObserverProvider option={option}>
    {/* ... */}
  </IntersectObserverProvider>
};

IntersectObserver module

해당 컴포넌트가 위치한 영역이 화면 뷰포트에 노출되는 시점에 콜백이 수행되도록 하는 컴포넌트.

return () => {
  <>
    {/* ... */}
    <div className="box">
      This is a box
    </div>
    <IntersectObserver
      active // 활성화 여부 (default=true)
      onIntersected={() => console.log('Intersected!')}
    />
  </>
};

LazyImage module

<img> 태그 래퍼 컴포넌트.

return () => {
  <LazyImage
    url="" // string (로드 할 이미지 주소)
    title="Lazy load image" // string (<img>태그의 alt 값)
    width="100%" // string | number
    height="100%" // string | number
    beforeLoad={<Loading/>} // JSXElement | null (이미지 로드 전이나 오류시 노출될 컴포넌트)
    loading={<Loading/>} // JSXElement | null (이미지 로딩중 노출될 컴포넌트)
    loadingImageUrl="" // string (로딩중 이미지 주소)
    error={<NoImage/>} // JSXElement | null (이미지 로딩중 오류 발생시 노출될 컴포넌트)
    errorImageUrl="" // string (로딩 오류 이미지 주소)
    fit="initial" // <img>태그에 적용될 objectFit 스타일
    tabIndex={0} // number (tabIndex 지정)
    className="" // string
    style={} // React.CSSProperties
    onMouseOver={(event: React.MouseEvent<HTMLSpanElement>) => {}} // 이미지 mouse over시 콜백
    onMouseLeave={(event: React.MouseEvent<HTMLSpanElement>) => {}} // 이미지 mouse leave시 콜백
    onFocus={(event: React.FocusEvent<HTMLSpanElement>) => {}} // 이미지 focus시 콜백
    onBlur={(event: React.FocusEvent<HTMLSpanElement>) => {}} // 이미지 blur시 콜백
    onClick={(event: React.MouseEvent<HTMLImageElement>) => {}} // 이미지 영역 클릭시 콜백
    onLoaded={(payload: LazyImagePayload) => {}} // 이미지 로드 완료시 콜백
    onError={(url: string) => {}} // 이미지 로드 오류시 콜백
  />
};

LazyBackground module

배경이미지 형태로 이미지를 lazy loading 처리

return () => {
  <LazyBackground
    url="" // string (로드 할 이미지 주소)
    title="Lazy load image" // string (<span>태그의 title 값)
    backgroundSize="" // string (React.CSSProperties['backgroundSize'] 값)
    beforeLoad={<Loading/>} // JSXElement | null (이미지 로드 전이나 오류시 노출될 컴포넌트)
    loading={<Loading/>} // JSXElement | null (이미지 로딩중 노출될 컴포넌트)
    loadingImageUrl="" // string (로딩중 이미지 주소)
    error={<NoImage/>} // JSXElement | null (이미지 로딩중 오류 발생시 노출될 컴포넌트)
    errorImageUrl="" // string (로딩 오류 이미지 주소)
    tabIndex={0} // number (tabIndex 지정)
    className="" // string
    style={} // React.CSSProperties
    onMouseOver={(event: React.MouseEvent<HTMLSpanElement>) => {}} // 이미지 mouse over시 콜백
    onMouseLeave={(event: React.MouseEvent<HTMLSpanElement>) => {}} // 이미지 mouse leave시 콜백
    onFocus={(event: React.FocusEvent<HTMLSpanElement>) => {}} // 이미지 focus시 콜백
    onBlur={(event: React.FocusEvent<HTMLSpanElement>) => {}} // 이미지 blur시 콜백
    onClick={(event: React.MouseEvent<HTMLImageElement>) => {}} // 이미지 영역 클릭시 콜백
    onLoaded={(payload: LazyImagePayload) => {}} // 이미지 로드 완료시 콜백
    onError={(url: string) => {}} // 이미지 로드 오류시 콜백
  >
    {children} {/* 이미지 내부에 표시 될 컨텐츠가 있는 경우 children으로 전달 */}
  </LazyBackground>
};

SwapImage module

이미지 마우스 오버시 대체 이미지를 보여주는 컴포넌트.

@import "~@mornya/react-image-libs/dist/SwapImage.scss";

return () => {
  <SwapImage
    mainImagePath="" // string (메인 이미지 경로)
    subImagePath="" // string | undefined (대체될 이미지 경로)
    title="" // string (<span>태그의 title 값)
    loading={<Loading/>} // JSXElement | null (이미지 로딩중 노출될 컴포넌트)
  />
};

Utilities

getImageSize

입력 받은 URL에 대한 이미지 사이즈를 얻는다.

type ImageSizeOption = {
  timeout?: number; // 이미지 로딩 타임아웃 설정
  isIgnoreError?: boolean; // 오류시 무시(ImageSize 리턴)하거나 throw
};

function getImageSize(url: string, option?: ImageSizeOption): Promise<ImageSize> {}

getImageFileToData

원격 이미지를 파일 객체로 변환하여 저장.

function getImageFileToData(file: File): Promise<string> {}

Change Log

프로젝트 변경사항은 CHANGELOG.md 파일 참조.

License

프로젝트 라이센스는 LICENSE 파일 참조.