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.
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)
loadingBar	Component	null	Specifies the Loading Bar to use for append or prepend items.
percentage	Boolean	false	Set percent position.
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 loadingBar={<LoadingBar append>LOADINGBAR</LoadingBar>}>
    {this.state.list}
</GridLayout>

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

// end loading
<GridLayout loadingBar={}>
    {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
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

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
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

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
groupKey	Number, String	The group key of the first group visible on the screen
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