mornya-react-virtual-libs

The module of React.js Virtualized Infinity Scroll.

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-virtual-libs
or
$ yarn add @mornya/react-virtual-libs

Modules in the package

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

VirtualScroll module

반응형 웹에서 무한스크롤 가능한 그리드 형태의 뷰 영역을 랜더링한다 (SSR 대응).

import { VirtualScroll } from '@mornya/react-virtual-libs';

const Sample: React.FC = () => {
  return () => {
    <VirtualScroll
      total={0} // number (총 아이템 갯수)
      width={100} // number (아이템 width)
      height={100} // number (아이템 height)
      minColumns={1} // number (작은 화면에서 표시할 최소 칼럼 수)
      scrollContainer={window} // Window | HTMLElement (스크롤 영역의 컨테이너 엘리먼트)
      viewportRowOffset={40} // number (표시될 아이템 갯수, 40 = 위 20개 + 아래 20개)
      loading={<Loading/>} // 로딩 이미지
      className="" // string
      style={{ display: 'block' }} // React.CSSProperties
    >
      {(info) => (
        <div key={info.key} style={{ display: 'flex', ...info.style }}>
          <ProductCard
            item={products[info.index]}
            onChanged={(status) => onChanged(status, info.index)}
          />
        </div>
      )}
    </VirtualScroll>
  };
};

export default Sample;

Change Log

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

License

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