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
useFit	Boolean	true	The useFit option scrolls upwards so that no space is visible until an item is added.
useFirstRender	Boolean	true	The useFirstRender option determines whether the markup will be shown on the first rendering or after loading is complete.
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.
transitionDuration	number	0	Indicates how many seconds a transition effect takes to complete.
loading	Component		Specifies the Loading Bar to use for append or prepend items.
status	Object	null	State object of the react-infinitegrid module
horizontal	Boolean	false	Direction of the scroll movement (true: horizontal, false: vertical)
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.

loading(Bar)

render() {
    return <GridLayout loading={<div className="loadingbar">Loading...</div>}/>;
}
onAppend = e => {
    e.startLoading(); // loading or loading bar (append)
    e.startLoading(useStyle); // loading bar with userStyle (append)
    e.endLoading(); // stop loading (append) for data error or no data
};
onPrepend = e => {
    e.startLoading(); // loading or loading bar(prepend)
    e.startLoading(useStyle); // loading bar with userStyle (prepend)
    e.endLoading(); // stop loading (prepend) for data error or no data
};
onLayoutComplete = e => {
    !e.isLayout && e.endLoading(); // end loading
}

startLoading(userStyle?: object)

Start loading for append/prepend during loading data.

• events: onAppend, onPrepend

name	type	default	description
userStyle	Object	{display: "block"}	The custom style to apply to this loading bar for start.

endLoading()

End loading after startLoading() for append/prepend

• events: onAppend, onPrepend, onLayoutComplete

name	type	default	description
userStyle	Object	{display: "none"}	The custom style to apply to this loading bar for end.

Methods

getItems(includeCached?: boolean): IInfiniteGridItem[]

Returns the layouted items.

name	type	default	description
includeCached	boolean	false	Indicates whether to include the cached items.

• return: List of items

layout(isRelayout?: boolean): this

Rearranges a layout.

name	type	default	description
isRelayout	boolean	true	Indicates whether a card element is being relayouted

getStatus(): object

Returns the current state of a module such as location information. You can use the setStatus() method to restore the information returned through a call to this method.

• return : State object of the react-infinitegrid module

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 last group visible on the screen
startLoading	Function	Start loading for append loading data.
endLoading	Function	End loading after startLoading() for append/prepend loading data.

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
startLoading	Function	Start loading for prepend loading data.
endLoading	Function	End loading after startLoading() for append/prepend loading data.

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.

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.
fromCache	Boolean	Check whether these items are cache or not
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.
endLoading	Function	End loading after startLoading() for append/prepend loading data.