react infinitegrid API documentation

Prop Types

property	type	default	description
tag	String	"div"	The tag name of container
threshold	Number	100	The threshold size of an event area where card elements are added to a layout.
margin	Number	0	The margin used to create space around items
isOverflowScroll	Boolean	false	Indicates whether overflow:scroll is applied
isEqualSize	Boolean	false	Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
isConstantSize	Boolean	false	Indicates whether sizes of all card elements does not change.
useRecycle	Boolean	true	Indicates whether keep the number of DOMs is maintained. If the useRecycle value is 'true', keep the number of DOMs is maintained. If the useRecycle value is 'false', the number of DOMs will increase as card elements are added.
horizontal	Boolean	false	Direction of the scroll movement (true: horizontal, false: vertical)
loading	Component, Boolean	false	Specifies the Loading Bar to use for append or prepend items.
onAppend	Function		This event is fired when a card element must be added at the bottom or right of a layout because there is no card to be displayed on screen when a user scrolls near bottom or right.
onPrepend	Function		This event is fired when a card element must be added at the top or left of a layout because there is no card to be displayed on screen when a user scrolls near top or left.
onLayoutComplete	Function		This event is fired when layout is successfully arranged through a call to the append(), prepend(), or layout() method.
onImageError	Function		This event is fired when an error occurs in the image.
onChange	Function		This event is fired when the user scrolls.

loadingBar

Specifies the Loading Bar to use for append or prepend items.

// appending
<GridLayout loading={<LoadingBar append>LOADINGBAR</LoadingBar>}>
    {this.state.list}
</GridLayout>

// prepending
<GridLayout loading={<LoadingBar prepend>LOADINGBAR</LoadingBar>}>
    {this.state.list}
</GridLayout>

// end loading
<GridLayout loading={false}>
    {this.state.list}
</GridLayout>

events

onAppend(options)

This event is fired when a card element must be added at the bottom or right of a layout because there is no card to be displayed on screen when a user scrolls near bottom or right.

name	type	description
groupKey	Number, String	The group key of the first group visible on the screen

onPrepend(options)

This event is fired when a card element must be added at the top or left of a layout because there is no card to be displayed on screen when a user scrolls near top or left.

name	type	description
groupKey	Number, String	The group key of the first group visible on the screen

onChange(options)

This event is fired when the user scrolls.

name	type	description
isForward	Boolean	Indicates whether the scroll progression direction is forward or backword.
scrollPos	Number	Current scroll position value relative to the infiniteGrid container element.
orgScrollPos	Number	Current position of the scroll.
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

onImageError(options)

This event is fired when an error occurs in the image.

name	type	description
target	Element	Appending card's image element.
elememt	Element	The item's element with error images.
item	Object	The item with error images.
itemIndex	Number	The item's index with error images.

onLayoutComplete(options)

This event is fired when layout is successfully arranged through a call to the append(), prepend(), or layout() method.

name	type	description
target	Array	Rearranged card element.
groupKey	Number, String	The group key of the first group visible on the screen
isAppend	Boolean	Checks whether the append() method is used to add a card element. It returns true even though the layoutComplete event is fired after the layout() method is called.
isScroll	Boolean	Checks whether scrolling has occurred after the append(), prepend(), ..., etc method is called
scrollPos	Number	Current scroll position value relative to the infiniteGrid container element.
orgScrollPos	Number	Current position of the scroll.
size	Number	The size of container element.
isLayout	Boolean	Returns true if this is an event called by resize event or layout method. Returns false if this is an event called by adding an item.