2.0.2 • Published 1 month ago
@mornya/react-image-libs v2.0.2
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 () => { {/ ... /} };
### IntersectObserver module
해당 컴포넌트가 위치한 영역이 화면 뷰포트에 노출되는 시점에 콜백이 수행되도록 하는 컴포넌트.
```typescript jsx
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; // 오류시 무시(ImageSize 리턴)하거나 throw
};
function getImageSize (url: string, option?: ImageSizeOption): Promise<ImageSize> {}
getImageFileToData
원격 이미지를 파일 객체로 변환하여 저장.
function getImageFileToData (file: File): Promise<string> {}
Change Log
프로젝트 변경사항은 CHANGELOG.md 파일 참조.
License
프로젝트 라이센스는 LICENSE 파일 참조.