react-fast-masonry
Version:
A fast masonry infinite-scrolling component using the intersection api
77 lines (72 loc) • 2.73 kB
TypeScript
import { ListProps } from '@researchgate/react-intersection-list';
import { default as React_2 } from 'react';
/** The main Fast Masonry component
*
* @example
* ```tsx
* <MasonryLayout
* sizes={[
* { columns: 1, gutter: 0, columnWidth: "100%" },
* { cq: 768, columns: 2, gutter: 20, columnWidth: 300 },
* { cq: 1024, columns: 3, gutter: 20, columnWidth: 400 }
* ]}
* items={this.state.items}
* renderItem={({ columnWidth }, index: number, key: any) => (
* <div
* style={{
* ...this.state.items[index],
* ...MyMasonry.defaultStyles,
* width: columnWidth
* }}
* key={key}
* >
* {index}
* </div>
* )}
* loadMore={this.loadMore}
* awaitMore={true}
* pageSize={20}
* className="masonry"
* />
* ```
*
* @param props - The functions props
*
* @public
*/
declare const FastMasonry: <T extends unknown>({ items, renderItem, loadMore, onIntersection, className, pack, packedAttribute, position, sizes, style, outerStyle, outerClassName, ...props }: MasonryInfiniteScrollerProps<T>) => JSX.Element;
export { FastMasonry }
export default FastMasonry;
/** The input props to the FastMasonry component
*
* @public */
export declare type MasonryInfiniteScrollerProps<ItemType> = Omit<ListProps, "renderItem" | "children" | "itemCount"> & {
items: ItemType[];
loadMore: () => void;
onIntersection?: ListProps["onIntersection"];
renderItem: (currentSizing: MasonrySizing, ...args: Parameters<Required<ListProps>["renderItem"]>) => ReturnType<Required<ListProps>["renderItem"]>;
className?: string;
outerClassName?: string;
pack?: boolean;
packedAttribute?: string;
position?: boolean;
/** The sizes for columns and gutters at specific container queries */
sizes: [MasonrySizing, ...MasonrySizing[]];
style?: React_2.CSSProperties;
outerStyle?: React_2.CSSProperties;
};
/** Allows the masonry layout to be addjusted at certain container sizes.
* @public */
export declare type MasonrySizing = {
/** The number of columns to display across the container. */
columns: number;
/** The sizing of the space between columns
* @public
*/
gutter: number;
/** The column widths (note they must all be the same width since bricks.js is used) */
columnWidth?: NonNullable<React_2.CSSProperties["width"]>;
/** The min-width of the surrounding container to apply these MasonrySizing constraints. The number will be zero if left off. */
cq?: number;
};
export { }