react-fast-masonry

A fast masonry infinite-scrolling component using the intersection api

Usage no npm install needed!

<script type="module">
  import reactFastMasonry from 'https://cdn.skypack.dev/react-fast-masonry';
</script>

README

react-fast-masonry

A react masonry library featuring infinite-scrolling capabilities using bricks.js and react-intersection list. It's based off 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

npm i --save react-fast-masonry

Usage

First import the library react-fast-masonry

import MasonryLayout from "react-fast-masonry";

Then use it like so.

<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.


## Examples & Documentation

Checkout the [storybook](https://johnsonjo4531.github.io/react-fast-masonry/) or this [codesandbox.io](https://codesandbox.io/s/n9mpn054jl)!

## Contributing

See below details to see how the Yeoman generator `generator-react-exhibit` setup this project and which may give you possible tips for contributing

### Tech Stack

| frontend      |                                                                  |
| ------------- | ---------------------------------------------------------------- |
| view library  | [react](https://reactjs.org/)                                    |
| boilerplate   | [create-react-app](https://github.com/facebook/create-react-app) |
| documentation | [storybook](https://github.com/storybooks/storybook)             |

### Getting started

You can use [generator-react-exhibit](generator-react-exhibit) to build your library. Simply run:

```sh
yo react-exhibit my-library

To view your library in action run:

cd my-library
npm start

You can now open http://localhost:9009/ and view your component documentation.

To include a component in the storybook, simply add a <componentName>.stories.js file in your component folder, containing the stories you want to show. Have a look at the Button component for an example.

Scripts

A set of scripts are provided for you to test, build and analyze the project. Have a look at create react app for more information.

Test

You can run all tests in the project with the following command:

npm run test

You can also generate a website with information on the code coverage with:

npm run test -- --coverage

This will generate a website in the folder coverage. You can launch it with any server of your choice, for example serve.

npm i -g serve && serve coverage

Build

You can build a production ready version of your library by running:

npm run build

This will create a build folder containing your library.

You can also build a production ready version of your documentation by running:

npm run build:storybook

This will create a folder called storybook-static with your documentation.

Deploy

After building your documentation, you can deploy it as a gh-page. Make sure to add a homepage entry in your package.json like so:

{
  "homepage": "https://my-github-name.github.io/my-library/"
}

Then simply run:

npm run deploy

You can also publish your library to npm. To do that, simply run:

npm publish

Dependency map

You can generate a map of all dependencies, this can be very usefull when trying to identify a library causing bloat to the application. After building your application you can generate a map, by running:

npm run analyze

This will look into your build folder and open an interactive map of the dependencies in your browser.

Adding typescript

Typescript support was added to react-scripts@2.1.0. To activate it, run:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

License

MIT