@frankhoodbs/infinite-scroll-cmp

Infinite Scroll Component

A customizable component designed to help with setting up infinite scrolling either on the window or a provided element.

Props

Prop Name	Default Value	Description
data-manual-load	false	Boolean indicating if the control of the items loading should be manual (button) or automatic (scroll)
data-load-callback	-	Required Function to call to load more items (needs to return a promise)
data-content-finished	-	Required Booolean that signals the component when there are no more new items to load
data-root	null	The Element or Document whose bounds are used as the bounding box when testing for intersection.
data-root-margin	'0px 0px 0px 0px'	A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
data-threshold	0.10000000149011612	Either a single number or an array of numbers between 0.0 and 1.

Slots

Name	Description
default	Slot that recieves the elements that should be wrapped by the infinite scroll component
manual-loader	Slot for clickable element to fire up manual load (es: buttons), needs slot prop load the function to load items
error	Slot for the html to show if an error occurs
loading	Slot for the animation/spinner to show during loading
content-finished	Slot for the to show if there aren't more content

Events

Event	Payload Type	Description
'loaded'	Array	Emits the value returned from the async function in dataLoader