react-staggered-grid

import React, { ReactHTML, ReactNode, RefObject } from 'react'; declare enum StaggeredItemSpan { /** Occupy one column */ Single = 1, /** Occupy total columnCount as span */ Full = 99999 } declare enum StaggeredAlignment { /** Align items in the left*/ Start = 0, /** Align items in the center */ Center = 1, /** Align items to the right */ End = 2 } interface PositionedItem { /** width of the item calculated using itemSpan * columnWidth */ width: number; /** translateX of the item */ left: number; /** translateY of the item */ top: number; } interface StaggeredGridController { isRegistered: boolean; /** This will request reposition on the next animation frame , useful for multiple calls */ requestReposition: () => void; /** Force reposition all the items */ reposition: () => void; } interface StaggeredGridProps extends React.HTMLProps<HTMLElement> { /** type of html element for the grid , by default 'div' is used */ elementType: keyof ReactHTML; /** width of each column , if not given , calculated using gridWidth / columns */ columnWidth?: number; /** total columns of the grid , if not given , calculated using gridWidth / columnWidth */ columns?: number; /** horizontal alignment of the items on the grid 0 = left,1 = center,2 = right */ alignment?: StaggeredAlignment; /** children of the grid , must be StaggeredGridItem */ children?: ReactNode | undefined; /** css properties */ style?: React.CSSProperties | undefined; /** grid controller used to swap items or reposition forcibly , can be obtained using createStaggeredGridController */ gridController?: StaggeredGridController | undefined; /** when true gridWidth width of the html element is used even if columns & columnWidth are given */ useElementWidth: boolean; /** total width of the grid , if not given calculated using a ref on html element */ gridWidth?: number; /** set calculated height of the grid to the html element default true*/ calculateHeight: boolean; /** vertical gap between items on the grid */ verticalGap?: number; /** horizontal gap between items on the grid */ horizontalGap?: number; /** when true horizontal gap is fitted with columnWidth , useful when extra horizontal gap must not cause overflow */ fitHorizontalGap?: boolean; /** when window is resized grid items are repositioned again, default true */ repositionOnResize?: boolean; /** if given , when user reaches the end of the grid , it's fired to allow adding more items to grid to make it infinite */ requestAppend?: () => void; /** scroll tolerance for request append function , default 20px , more tolerance = fired earlier than the end */ requestAppendScrollTolerance?: number; } interface StaggeredGridItemProps extends React.HTMLProps<HTMLElement> { /** type of html element used , by default 'div' */ elementType: keyof ReactHTML; /** initial position of the item on the grid , default 0 for everything */ initialPosition?: PositionedItem; /** item height , calculated using a ref when not given */ itemHeight?: number; /** span of the item on the grid , column span for vertical grid */ spans?: StaggeredItemSpan | number; /** index of the item in the items */ index: number; /** CSS Properties */ style?: React.CSSProperties | undefined; /** children of the item */ children?: ReactNode | undefined; /** transform the positioned item to html props for the StaggeredGridItem , by default uses css properties like left,top & position:absolute */ transform?(itemPos: PositionedItem): React.HTMLProps<HTMLElement>; } interface StaggeredGridState { calculatedGridHeight: number | undefined; } interface GridItemData { itemHeight: number; itemColumnSpan: StaggeredItemSpan | number; mounted: boolean; update: (width: number, x: number, y: number) => void; } declare class StaggeredGrid<ItemType> extends React.Component<StaggeredGridProps & typeof StaggeredGrid.defaultProps, StaggeredGridState> { static defaultProps: { elementType: string; alignment: StaggeredAlignment; calculateHeight: boolean; useElementWidth: boolean; horizontalGap: number; verticalGap: number; repositionOnResize: boolean; fitHorizontalGap: boolean; requestAppendScrollTolerance: number; }; repositionedOnce: boolean; gridWidth: number | undefined; gridItems: Array<GridItemData>; requestRepositioningId: number | undefined; state: { calculatedGridHeight: undefined; }; gridElementRef: HTMLElement | null; constructor(props: Readonly<StaggeredGridProps & typeof StaggeredGrid.defaultProps> | (StaggeredGridProps & typeof StaggeredGrid.defaultProps)); registerController(controller: StaggeredGridController): void; getGridWidth(): number; getDefinedColsCount(): number | undefined; getDefinedColumnWidth(gridWidth: number): number; getColumnWidth(gridWidth: number, columnCount: number, horizontalGap: number): number; getColsCount(gridWidth: number): number; reposition: () => void; requestReposition: () => void; onResize: () => void; onScroll: () => void; componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(prevProps: Readonly<StaggeredGridProps & typeof StaggeredGrid.defaultProps>, prevState: Readonly<StaggeredGridState>, snapshot?: any): void; updateItem(index: number, itemColumnSpan: StaggeredItemSpan | number, height: number, update: (width: number, x: number, y: number) => void): void; removeItem(index: number): void; elementProps(): any; render(): JSX.Element; } /** * This gives back a controller object , it should be given to the * StaggeredGrid Component using 'gridController' Prop, the component will register with this controller, * then you can use controller to call functions on the grid ! */ declare function createStaggeredGridController(): StaggeredGridController; declare type StaggeredGridContextType = { updateItem: (index: number, itemColumnSpan: StaggeredItemSpan | number, height: number, update: (width: number, x: number, y: number) => void) => void; removeItem: (index: number) => void; }; declare const StaggeredGridContext: React.Context<StaggeredGridContextType>; declare function useStaggeredGrid(): StaggeredGridContextType; declare class StaggeredGridItem extends React.Component<StaggeredGridItemProps & typeof StaggeredGridItem.defaultProps, PositionedItem> { static contextType: React.Context<StaggeredGridContextType>; static defaultProps: { spans: number; elementType: string; }; context: React.ContextType<typeof StaggeredGridContext>; state: PositionedItem; itemElementRef: HTMLElement | null; updateTranslate: (width: number, x: number, y: number) => void; /** * Reports height and width */ reportData(): void; componentDidMount(): void; componentDidUpdate(prevProps: Readonly<StaggeredGridItemProps & typeof StaggeredGridItem.defaultProps>, prevState: Readonly<PositionedItem>, snapshot?: any): void; componentWillUnmount(): void; transform(itemPos: PositionedItem): React.HTMLProps<HTMLElement>; render(): React.DetailedReactHTMLElement<{ ref: ((element: HTMLElement | null) => void) | undefined; onLoad: () => void; accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; as?: string | undefined; async?: boolean | undefined; autoComplete?: string | undefined; autoFocus?: boolean | undefined; autoPlay?: boolean | undefined; capture?: boolean | "user" | "environment" | undefined; cellPadding?: string | number | undefined; cellSpacing?: string | number | undefined; charSet?: string | undefined; challenge?: string | undefined; checked?: boolean | undefined; cite?: string | undefined; classID?: string | undefined; cols?: number | undefined; colSpan?: number | undefined; content?: string | undefined; controls?: boolean | undefined; coords?: string | undefined; crossOrigin?: string | undefined; data?: string | undefined; dateTime?: string | undefined; default?: boolean | undefined; defer?: boolean | undefined; disabled?: boolean | undefined; download?: any; encType?: string | undefined; form?: string | undefined; formAction?: string | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; formTarget?: string | undefined; frameBorder?: string | number | undefined; headers?: string | undefined; height?: string | number | undefined; high?: number | undefined; href?: string | undefined; hrefLang?: string | undefined; htmlFor?: string | undefined; httpEquiv?: string | undefined; integrity?: string | undefined; keyParams?: string | undefined; keyType?: string | undefined; kind?: string | undefined; label?: string | undefined; list?: string | undefined; loop?: boolean | undefined; low?: number | undefined; manifest?: string | undefined; marginHeight?: number | undefined; marginWidth?: number | undefined; max?: string | number | undefined; maxLength?: number | undefined; media?: string | undefined; mediaGroup?: string | undefined; method?: string | undefined; min?: string | number | undefined; minLength?: number | undefined; multiple?: boolean | undefined; muted?: boolean | undefined; name?: string | undefined; nonce?: string | undefined; noValidate?: boolean | undefined; open?: boolean | undefined; optimum?: number | undefined; pattern?: string | undefined; placeholder?: string | undefined; playsInline?: boolean | undefined; poster?: string | undefined; preload?: string | undefined; readOnly?: boolean | undefined; rel?: string | undefined; required?: boolean | undefined; reversed?: boolean | undefined; rows?: number | undefined; rowSpan?: number | undefined; sandbox?: string | undefined; scope?: string | undefined; scoped?: boolean | undefined; scrolling?: string | undefined; seamless?: boolean | undefined; selected?: boolean | undefined; shape?: string | undefined; size?: number | undefined; sizes?: string | undefined; span?: number | undefined; src?: string | undefined; srcDoc?: string | undefined; srcLang?: string | undefined; srcSet?: string | undefined; start?: number | undefined; step?: string | number | undefined; summary?: string | undefined; target?: string | undefined; type?: string | undefined; useMap?: string | undefined; value?: string | number | readonly string[] | undefined; width?: string | number | undefined; wmode?: string | undefined; wrap?: string | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; suppressHydrationWarning?: boolean | undefined; accessKey?: string | undefined; className?: string | undefined; contentEditable?: (boolean | "true" | "false") | "inherit" | undefined; contextMenu?: string | undefined; dir?: string | undefined; draggable?: (boolean | "true" | "false") | undefined; hidden?: boolean | undefined; id?: string | undefined; lang?: string | undefined; slot?: string | undefined; spellCheck?: (boolean | "true" | "false") | undefined; style?: React.CSSProperties | undefined; tabIndex?: number | undefined; title?: string | undefined; translate?: "yes" | "no" | undefined; radioGroup?: string | undefined; role?: React.AriaRole | undefined; about?: string | undefined; datatype?: string | undefined; inlist?: any; prefix?: string | undefined; property?: string | undefined; resource?: string | undefined; typeof?: string | undefined; vocab?: string | undefined; autoCapitalize?: string | undefined; autoCorrect?: string | undefined; autoSave?: string | undefined; color?: string | undefined; itemProp?: string | undefined; itemScope?: boolean | undefined; itemType?: string | undefined; itemID?: string | undefined; itemRef?: string | undefined; results?: number | undefined; security?: string | undefined; unselectable?: "on" | "off" | undefined; inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined; is?: string | undefined; 'aria-activedescendant'?: string | undefined; 'aria-atomic'?: (boolean | "true" | "false") | undefined; 'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined; 'aria-busy'?: (boolean | "true" | "false") | undefined; 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined; 'aria-colcount'?: number | undefined; 'aria-colindex'?: number | undefined; 'aria-colspan'?: number | undefined; 'aria-controls'?: string | undefined; 'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined; 'aria-describedby'?: string | undefined; 'aria-details'?: string | undefined; 'aria-disabled'?: (boolean | "true" | "false") | undefined; 'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined; 'aria-errormessage'?: string | undefined; 'aria-expanded'?: (boolean | "true" | "false") | undefined; 'aria-flowto'?: string | undefined; 'aria-grabbed'?: (boolean | "true" | "false") | undefined; 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined; 'aria-hidden'?: (boolean | "true" | "false") | undefined; 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined; 'aria-keyshortcuts'?: string | undefined; 'aria-label'?: string | undefined; 'aria-labelledby'?: string | undefined; 'aria-level'?: number | undefined; 'aria-live'?: "off" | "assertive" | "polite" | undefined; 'aria-modal'?: (boolean | "true" | "false") | undefined; 'aria-multiline'?: (boolean | "true" | "false") | undefined; 'aria-multiselectable'?: (boolean | "true" | "false") | undefined; 'aria-orientation'?: "horizontal" | "vertical" | undefined; 'aria-owns'?: string | undefined; 'aria-placeholder'?: string | undefined; 'aria-posinset'?: number | undefined; 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined; 'aria-readonly'?: (boolean | "true" | "false") | undefined; 'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined; 'aria-required'?: (boolean | "true" | "false") | undefined; 'aria-roledescription'?: string | undefined; 'aria-rowcount'?: number | undefined; 'aria-rowindex'?: number | undefined; 'aria-rowspan'?: number | undefined; 'aria-selected'?: (boolean | "true" | "false") | undefined; 'aria-setsize'?: number | undefined; 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined; 'aria-valuemax'?: number | undefined; 'aria-valuemin'?: number | undefined; 'aria-valuenow'?: number | undefined; 'aria-valuetext'?: string | undefined; children?: React.ReactNode; dangerouslySetInnerHTML?: { __html: string; } | undefined; onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined; onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; onCut?: React.ClipboardEventHandler<HTMLElement> | undefined; onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined; onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined; onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined; onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined; onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined; onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined; onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined; onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined; onFocus?: React.FocusEventHandler<HTMLElement> | undefined; onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined; onBlur?: React.FocusEventHandler<HTMLElement> | undefined; onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined; onChange?: React.FormEventHandler<HTMLElement> | undefined; onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined; onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined; onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined; onInput?: React.FormEventHandler<HTMLElement> | undefined; onInputCapture?: React.FormEventHandler<HTMLElement> | undefined; onReset?: React.FormEventHandler<HTMLElement> | undefined; onResetCapture?: React.FormEventHandler<HTMLElement> | undefined; onSubmit?: React.FormEventHandler<HTMLElement> | undefined; onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined; onInvalid?: React.FormEventHandler<HTMLElement> | undefined; onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined; onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined; onError?: React.ReactEventHandler<HTMLElement> | undefined; onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined; onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined; onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined; onAbort?: React.ReactEventHandler<HTMLElement> | undefined; onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined; onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined; onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined; onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; onEmptied?: React.ReactEventHandler<HTMLElement> | undefined; onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined; onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onEnded?: React.ReactEventHandler<HTMLElement> | undefined; onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined; onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined; onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined; onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined; onPause?: React.ReactEventHandler<HTMLElement> | undefined; onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined; onPlay?: React.ReactEventHandler<HTMLElement> | undefined; onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined; onPlaying?: React.ReactEventHandler<HTMLElement> | undefined; onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined; onProgress?: React.ReactEventHandler<HTMLElement> | undefined; onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined; onRateChange?: React.ReactEventHandler<HTMLElement> | undefined; onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; onSeeked?: React.ReactEventHandler<HTMLElement> | undefined; onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined; onSeeking?: React.ReactEventHandler<HTMLElement> | undefined; onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined; onStalled?: React.ReactEventHandler<HTMLElement> | undefined; onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined; onSuspend?: React.ReactEventHandler<HTMLElement> | undefined; onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined; onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined; onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined; onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined; onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined; onWaiting?: React.ReactEventHandler<HTMLElement> | undefined; onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined; onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined; onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; onClick?: React.MouseEventHandler<HTMLElement> | undefined; onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined; onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined; onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined; onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined; onDrag?: React.DragEventHandler<HTMLElement> | undefined; onDragCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragEnd?: React.DragEventHandler<HTMLElement> | undefined; onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragEnter?: React.DragEventHandler<HTMLElement> | undefined; onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragExit?: React.DragEventHandler<HTMLElement> | undefined; onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragLeave?: React.DragEventHandler<HTMLElement> | undefined; onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragOver?: React.DragEventHandler<HTMLElement> | undefined; onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined; onDragStart?: React.DragEventHandler<HTMLElement> | undefined; onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined; onDrop?: React.DragEventHandler<HTMLElement> | undefined; onDropCapture?: React.DragEventHandler<HTMLElement> | undefined; onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined; onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined; onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined; onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined; onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined; onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined; onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined; onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined; onSelect?: React.ReactEventHandler<HTMLElement> | undefined; onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined; onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined; onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined; onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined; onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined; onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined; onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined; onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined; onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined; onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined; onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined; onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined; onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined; onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined; onPointerEnterCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined; onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined; onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined; onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined; onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined; onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined; onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined; onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined; onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined; onScroll?: React.UIEventHandler<HTMLElement> | undefined; onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined; onWheel?: React.WheelEventHandler<HTMLElement> | undefined; onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined; onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined; onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined; onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined; onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined; onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined; onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined; onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined; onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined; key?: React.Key | null | undefined; }, HTMLElement>; } /** * useStaggeredItemPosition gives back position of the StaggeredGridItem * which can be transformed to css properties for the html element * @param index index of the item in the staggered grid items * @param spans span of the item , column span * @param itemHeight height of the item * @param ref ref object for element * @param initialPosition initial position of the item , by default 0 for everything */ declare function useStaggeredItemPosition<T extends HTMLElement>(index: number, spans: number, itemHeight?: number, ref?: RefObject<T>, initialPosition?: PositionedItem): PositionedItem; /** * use StaggeredGridItem as this is still a work in progress * @param props see StaggeredGridItemProps */ declare function StaggeredGridItemFunctional(props: StaggeredGridItemProps & typeof StaggeredGridItemFunctional.defaultProps): JSX.Element; declare namespace StaggeredGridItemFunctional { var defaultProps: { spans: number; }; } export { PositionedItem, StaggeredAlignment, StaggeredGrid, StaggeredGridContext, StaggeredGridContextType, StaggeredGridController, StaggeredGridItem, StaggeredGridItemFunctional, StaggeredGridItemProps, StaggeredGridProps, StaggeredItemSpan, createStaggeredGridController, useStaggeredGrid, useStaggeredItemPosition };