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 {
constructor(option?: IntersectionObserverInit) {}
public subscribe<T extends Element>(target: T, subscribeCallback: Callback): Unsubscriber {}
public subscribeOnce<T extends Element>(target: T, subscribeCallback: Callback): void {}
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 (로드 할 이미지 주소)
loadingImageUrl="" // string (로딩중 이미지 주소)
errorImageUrl="" // string (로딩 오류 이미지 주소)
width="100%" // string | number
height="100%" // string | number
title="Lazy load image" // string (<img>태그의 alt 값)
beforeLoad={<Loading/>} // JSXElement | null (이미지 로드 전이나 오류시 노출될 컴포넌트)
loading={<Loading/>} // JSXElement | null (이미지 로딩중 노출될 컴포넌트)
error={<NoImage/>} // JSXElement | null (이미지 로딩중 오류 발생시 노출될 컴포넌트)
priority={false} // 우선 순위가 필요한 이미지 일 경우에만 지정 (next/image의 priority 값)
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 (로드 할 이미지 주소)
loadingImageUrl="" // string (로딩중 이미지 주소)
errorImageUrl="" // string (로딩 오류 이미지 주소)
backgroundSize="" // string (React.CSSProperties['backgroundSize'] 값)
title="Lazy load image" // string (<span>태그의 title 값)
beforeLoad={<Loading/>} // JSXElement | null (이미지 로드 전이나 오류시 노출될 컴포넌트)
loading={<Loading/>} // JSXElement | null (이미지 로딩중 노출될 컴포넌트)
error={<NoImage/>} // JSXElement | null (이미지 로딩중 오류 발생시 노출될 컴포넌트)
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;
};
function getImageSize (url: string, option?: ImageSizeOption): Promise<ImageSize> {}
getImageFileToData
원격 이미지를 파일 객체로 변환하여 저장.
function getImageFileToData (file: File): Promise<string> {}
Change Log
프로젝트 변경사항은 CHANGELOG.md 파일 참조.
License
프로젝트 라이센스는 LICENSE 파일 참조.