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

onAppend = e => {
    e.startLoading(); // loading (append)
    e.startLoading(<div className="loading">loading</div>); // loading bar (append)
    e.startLoading(<div className="loading">loading</div>, useStyle); // loading bar with userStyle (append)
};
onPrepend = e => {
    e.startLoading(); // loading (prepend)
    e.startLoading(<div className="loading">loading</div>); // loading bar (prepend)
    e.startLoading(<div className="loading">loading</div>, useStyle); // loading bar with userStyle (prepend)
};
onLayoutComplete = e => {
    !e.isLayout && (e.endLoading()); // end loading
}

// only lock {this.state.list}

// show loading bar <GridLayout loading={

LOADINGBAR

}> {this.state.list}

// end loading {this.state.list}

## Methods
### layout(isRelayout?: bool): 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 first group visible on the screen|
|startLoading|Function|Start loading for append 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.|

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