egjs-infinitegrid/react infinitegrid API documentation

Prop types

 

속성	타입	기본값	설명
tag	String	"div"	컨테이너의 태그 이름
threshold	Number	100	카드 요소가 레이아웃에 추가되는 이벤트 영역의 threshold 크기
margin	Number	0	아이템 주변의 여백
useFit	Boolean	true	useFit 옵션은 항목이 추가 될 때 까지 공백이 보이지 않도록 위쪽으로 스크롤 함
useFirstRender	Boolean	true	useFirstRender옵션은 첫 번째 렌더링 시 또는 로드가 완료된 후 마크업을 표시할지 열부를 결정함
isOverflowScroll	Boolean	false	overflow:scroll이 적용되는지 여부를 나타냄
isEqualSize	Boolean	false	모든 카드 요소의 크기가 서로 같은지 여부를 나타냄. 카드 요소의 크기가 모두 같고, 이 옵션을 "true"로 설정하면 레이아웃 배치의 성능을 향상시킬 수 있다.
isConstantSize	Boolean	false	모든 카드 요소의 크기가 변경되지 않는지 여부를 나타냄
useRecycle	Boolean	true	DOM의 수를 유지할 지 여부를 나타냄. useRecycle 값이 'true'이면 DOM 수를 유지하고, 'false'이면 카드 요소가 추가 될 때 DOM 수가 증가
transitionDuration	number	0	전환 효과를 완료하는데 걸리는 시간 (초)을 나타냄
loading	Component		추가 또는 항목 앞에 사용할 로딩바를 지정
status	Object	null	react-infinitegrid module의 State객체
horizontal	Boolean	false	스크롤 이동 방향(true: 가로, false: 세로)
onAppend	Function		이 이벤트는 사용자가 맨 아래 또는 오른쪽으로 스크롤 할 경우 화면에 표시할 카드가 없을때, 레이아웃의 맨 아래 또는 오른쪽에 카드 요소를 추가해야 하는 경우 발생
onPrepend	Function		이 이벤트는 사용자가 위쪽이나 왼쪽으로 스크롤 할 경우 화면에 표시할 카드가 없을 때, 레이아웃의 위쪽이나 왼쪽에 카드 요소를 추가해야하는 경우에 발생
onLayoutComplete	Function		이 이벤트는 append(), prepend() 또는 layout() 메서드를 호출하여 레이아웃이 성공적으로 정렬되면 시작됨
onImageError	Function		이 이벤트는 이미지에 오류가 발생하면 시작됨
onChange	Funtion		이 이벤트는 사용자가 스크롤을 할 때 발생

Methods

getItems(includeCache?:boolean):InfiniteGridItem[]

레이아웃 항목을 반환한다.

이름	타입	기본값	설명
includeCached	Boolean	false	캐시된 항목을 포함할지 여부를 나타냄

*return : 아이템 리스트

layout(isRelayout?:boolean):this

레이아웃을 재정렬 한다.

이름	타입	기본값	설명
isRelayout	Boolean	true	카드 요소가 재정렬 되었는지 나타냄

getStatus():Object

위치 정보와 같은 모듈의 현재 상태를 반환한다. setStatus() 메서드를 사용하여 이 메서드 호출을 통해 반환된 정보를 복원할 수 있다.

*return: react-infinitegrid module의 State Object

Events

onAppend(options)

이 이벤트는 사용자가 맨 아래 또는 오른쪽으로 스크롤 할 경우 표시할 카드가 없을 때, 레이아웃의 맨 아래 또는 오른쪽에 카드 요소를 추가해야 하는 경우 발생한다.

이름	타입	설명
groupKey	Number, String	화면에 표시된 마지막 그룹의 그룹키
startLoading	Function	추가 데이터 로딩에 대한 로드를 시작
endLoading	Function	start loading() 이후의 append/prepend 로딩 데이터에 대한 end loading

onPrepend(options)

이 이벤트는 사용자가 위쪽이나 왼쪽으로 스크롤 할 경우 화면에 표시 할 카드가 없을 때, 레이아웃의 위쪽이나 왼쪽에 카드 요소를 추가해야 하는 경우 발생한다.

이름	타입	설명
groupKey	Number, String	첫 번째 그룹의 그룹 키가 화면에 표시
startLoading	Function	추가 데이터 로딩에 대한 로드를 시작
endLoading	Function	start loading() 이후의 append/prepend 로딩 데이터에 대한 end loading

onChange(options)

이 이벤트는 사용자가 스크롤 할 때 발생한다.

이름	타입	설명
isForward	Boolean	스크롤 진행 방향이 앞으로 또는 뒤로인지 여부를 나타냄
scrollPos	Number	infiniteGrid 컨테이너 element를 기준으로 현재 스크롤 위치 값
orgScrollPos	Number	스크롤의 현재 위치

onImageError(options)

이 이벤트는 이미지에 오류가 발생하면 시작한다.

이름	타입	설명
target	Element	카드의 이미지 요소를 추가한다.
element	Element	오류 이미지 elements
item	Object	오류 이미지
itemIndex	Number	오류 이미지들의 index

onLayoutComplete(options)

이 이벤트는 append(), prepend() 또는 layout() 메서드를 호출하여 레이아웃이 성공적으로 정렬되면 시작한다.

이름	타입	설명
target	Array	재정렬된 카드 element
groupkey	Number, String	첫번째 그룹의 그룹키가 화면에 표시
isAppend	Boolean	append() 메서드가 카드 요소를 추가하는데 사용되는지 여부를 확인. layout() 메서드가호출된 후에 layoutComplete 이벤트가 발생해도 true를 반환.
fromCache	Boolean	이 항목들이 캐시인지 아닌지 확인
isScroll	Boolean	append(), prepend(),... 등의 메소드가 호출 된 후 스크롤이 발생했는지 여부를 확인
scrollPos	Number	infiniteGrid 컨테이너 요소를 기준으로 한 현재 스크롤 위치 값
orgScrollPos	Number	스크롤의 현재 위치
size	Number	컨테이너 요소의 크기
isLayout	Boolean	resize 이벤트 또는 레이아웃 메서드에 의해 발생하는 이벤트의 경우 true를 반환함. 항목을 추가하여 호출 한 이벤트인 경우 false를 반환함.
endingLoading	Function	start loading() 이후의 append/prepend 로딩 데이터에 대한 end loading

출처 : https://github.com/naver/egjs-infinitegrid/wiki/react-infinitegrid-API-documentation

불러오는 중입니다...