react-fast-masonry
Version:
A fast masonry infinite-scrolling component using the intersection api
126 lines • 4.76 kB
TypeScript
/**
* # react-fast-masonry
*
* A react masonry library featuring infinite-scrolling capabilities using [bricks.js](http://callmecavs.com/bricks.js/) and [react-intersection list](https://github.com/researchgate/react-intersection-list). It's based off [react-masonry-infinite](https://github.com/skoob13/react-masonry-infinite), but uses react-intersection-list instead of react-infinite-scroll for faster infinite scrolling.
*
* Since it's based on bricks.js you will need to set all of your items within the masonry container to be the same width. What makes this different then bricks.js is it allows container-queries on it's sizing options rather than media queries. It also allows you to set custom widths at those container query breakpoints.
*
* ## Installing
*
* ```sh
* npm i --save react-fast-masonry
* ```
*
* ## Usage
*
* First import the library `react-fast-masonry`
*
* ```jsx
* import MasonryLayout from "react-fast-masonry";
* ```
*
* Then use it like so.
*
* ```jsx
* <MasonryLayout
* // This is a required prop this defines how wide your gutters and columns are (required) and optionally provides a way to define your column-width (columnWidth) and container-queries (cq)
* 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}
* // The columnWidth here comes from the sizes prop up above
* renderItem={({ columnWidth }, index: number, key: any) => (
* <div
* style={{
* width: columnWidth
* }}
* key={key}
* >
* {index}
* </div>
* )}
* loadMore={this.loadMore}
* awaitMore={true}
* pageSize={20}
* className="masonry"
* />
* ```
*
* A full fledged example of the above might is given as the Simple masonry layout in the [storybook](https://johnsonjo4531.github.io/react-fast-masonry/?selectedKind=FastMasonry&selectedStory=Simple%20masonry%20layout&full=0&addons=0&stories=1&panelRight=0).
*
*
* @packageDocumentation
*/
import React from "react";
import { ListProps } from "@researchgate/react-intersection-list";
/** 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.CSSProperties["width"]>;
/** The min-width of the surrounding container to apply these MasonrySizing constraints. The number will be zero if left off. */
cq?: number;
};
/** 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.CSSProperties;
outerStyle?: React.CSSProperties;
};
/** 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
*/
export declare const FastMasonry: <T extends unknown>({ items, renderItem, loadMore, onIntersection, className, pack, packedAttribute, position, sizes, style, outerStyle, outerClassName, ...props }: MasonryInfiniteScrollerProps<T>) => JSX.Element;
export default FastMasonry;
//# sourceMappingURL=FastMasonry.d.ts.map