JustifiedInfiniteGridOptions

Type: TSInterface

PROPERTY	TYPE	DEFAULT	DESCRIPTION
horizontal	boolean	false	Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
percentage	Array<"position" | "size"> | boolean	false	Whether to set the css size and position of the item to %.
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, the performance of layout arrangement can be improved.
gap	number | {horizontal?: number, vertical?: number}	5	Gap used to create space around items.
attributePrefix	string	"data-grid-"	The prefix to use element's data attribute.
resizeDebounce	number	100	Debounce time to set in the resize event. (unit: ms)
maxResizeDebounce	number	0	Maximum time to debounce the resize event. (0 is not set)
autoResize	boolean	true	Whether the resize method should be called automatically after a window resize event.
useFit	boolean	true	Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.
useTransform	boolean	false	Whether to use transform property instead of using left and top css properties.
renderOnPropertyChange	boolean	true	Whether to automatically render through property change.
preserveUIOnDestroy	boolean	false	Whether to preserve the UI of the existing container or item when destroying.
defaultDirection	"start" | "end"	"end"	The default direction value when direction is not set in the render option.
outlineLength	number	0	The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
outlineSize	number	0	The size of the outline. If the outline size is 0, it is calculated according to the grid type.
useRoundedSize	boolean	true	Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
useResizeObserver	boolean	false	Whether to use ResizeObserver event to detect container size change when autoResize option is used.
observeChildren	boolean	false	Whether to detect size change of children if useResizeObserver option is used.
externalItemRenderer	ItemRenderer | null		You can set the ItemRenderer directly externally.
externalContainerManager	ContainerManager | null		You can set the ContainerManager directly externally.
columnRange	number | number[]	[1, 8]	The minimum and maximum number of items per line.
rowRange	number | number[]	0	The minimum and maximum number of rows in a group, 0 is not set.
sizeRange	number | number[]	[0, Infinity]	The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes.
displayedRow	number	-1	Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set.
isCroppedSize	boolean	false	Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.
inlineOffset	number	0	The ratio is maintained except for the offset value in the inline direction. If 'data-grid-inline-offset' is set in the element of each item, it will be applied first.
contentOffset	number	0	The ratio is maintained except for the offset value in the content direction. If 'data-grid-content-offset' is set in the element or JSX of each item, it will be applied first.
stretch	boolean	false	it is possible to basically break the proportion of the item and stretch the inline size to fill the container. If you set the sizeRange range narrowly, you can stretch well.
stretchRange	Array<string | number>	["-10%", "+10%"]	If -, +, or % are added as a string value, it is a relative value to the original size. If it is a number value, the stretch range can be set as an absolute value. If data-grid-min-stretch and data-grid-max-stretch are set in the Element or JSX of each item, they will be applied first. @
passUnstretchRow	boolean		Items placed in the last row are not stretched and are drawn maintaining their proportions. When using InfiniteGrid, it is calculated and re-rendered as follows:
horizontal	boolean	false	Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
percentage	Array<"position" | "size"> | boolean	false	Whether to set the css size and position of the item to %.
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, the performance of layout arrangement can be improved.
gap	number | {horizontal?: number, vertical?: number}	5	Gap used to create space around items.
attributePrefix	string	"data-grid-"	The prefix to use element's data attribute.
resizeDebounce	number	100	Debounce time to set in the resize event. (unit: ms)
maxResizeDebounce	number	0	Maximum time to debounce the resize event. (0 is not set)
autoResize	boolean	true	Whether the resize method should be called automatically after a window resize event.
useFit	boolean	true	Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.
useTransform	boolean	false	Whether to use transform property instead of using left and top css properties.
renderOnPropertyChange	boolean	true	Whether to automatically render through property change.
preserveUIOnDestroy	boolean	false	Whether to preserve the UI of the existing container or item when destroying.
defaultDirection	"start" | "end"	"end"	The default direction value when direction is not set in the render option.
outlineLength	number	0	The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
outlineSize	number	0	The size of the outline. If the outline size is 0, it is calculated according to the grid type.
useRoundedSize	boolean	true	Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
useResizeObserver	boolean	false	Whether to use ResizeObserver event to detect container size change when autoResize option is used.
observeChildren	boolean	false	Whether to detect size change of children if useResizeObserver option is used.
externalItemRenderer	ItemRenderer | null		You can set the ItemRenderer directly externally.
externalContainerManager	ContainerManager | null		You can set the ContainerManager directly externally.
container	boolean | HTMLElement | string | Ref<HTMLElement>	false	The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.
containerTag	string	"div"	If you create a container, you can set the container's tag.
threshold	number	100	The size of the scrollable area for adding the next group of items.
useRecycle	boolean	true	Whether to show only the DOM of the visible area.
scrollContainer	HTMLElement | string | Ref<HTMLElement> | null		You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.
gridConstructor	GridFunction		Grid class to apply Infinite function.
appliedItemChecker	(item: InfiniteGridItem, grid: Grid) => boolean		A function that checks whether non-rendering items are included in the Grid.
renderer	Renderer | null		class that renders the DOM.