react-stack-grid

Sharing is caring!

Pinterest like layout components for React.js Pinterest like layout components for React.js.

Table of Contents

Live Demo

Screenshot

https://tsuyoshiwada.github.io/react-stack-grid/

Install

You can install the react-stack-grid from npm.

Install

You can install the react-stack-grid from npm.

$ npm install react-stack-grid

Quick Example

Following code is simplest usage.

import React, { Component } from "react";
import StackGrid from "react-stack-grid";

class MyComponent extends Component {
  render() {
    return (
      <StackGrid
        columnWidth={150}
      >
        <div key="key1">Item 1</div>
        <div key="key2">Item 2</div>
        <div key="key3">Item 3</div>
      </StackGrid>
    );
  }
}

width of parent is managed by react-sizeme.

Instance API

updateLayout(): void

Update the current layout.

Animations

The following function must return styles related to animation.
See ReactTransitionGroup for details.

  • appear
  • appeared
  • enter
  • entered
  • leaved

You can use extended syntax for transform’s style. For example properties like translateX and scale.
See easy-css-transform-builder.

Each function is given the following arguments.

  • rect: { top: number; left: number; width: number; height: number; }
  • containerSize: { width: number; height: number; }
  • index: number

It is easiest to use them because you have several presets.

  • fade
  • fadeDown
  • fadeUp
  • scaleDown
  • scaleUp
  • flip
  • helix

It’s an actual use example.

import StackGrid, { transitions } from "react-stack-grid";

const { scaleDown } = transitions;

class MyComponent extends Component {
  render() {
    return (
      <StackGrid
        ...
        appear={scaleDown.appear}
        appeared={scaleDown.appeared}
        enter={scaleDown.enter}
        entered={scaleDown.entered}
        leaved={scaleDown.leaved}
      >
        ...
      </StackGrid>
    );
  }
}

Please try actual demonstration in live demo.

Tips

Performance when using images

When true is specified for monitorImagesLoaded, reloading occurs when the image loading is completed.
If you know the size in advance, specify monitorImagesLoaded as false.

When animation is unnecessary

By default animation is enabled.
If it’s not necessary, specify 0 for duration property.

<StackGrid
  ...
  duration={0}
>
  ...
</StackGrid/>

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.