npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-stack-grid

v0.7.1

Published

Pinterest like layout components for React.js

Downloads

14,313

Readme

react-stack-grid

Build Status npm version

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.

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

Props

You can set the following properties.

| Property | Type | Default | Description | |:----------------------|:------------------------------------------------------------|:---------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------| | className | PropTypes.string | undefined | Specify className of component. | | style | PropTypes.object | {} | Original style of component. Following styles are ignored. (position, height, transition) | | gridRef | PropTypes.func | null | Reference the instance of StackGrid. Unlike ordinary ref, it accepts only functions. | | component | PropTypes.string | "div" | See ReactTransitionGroup | | itemComponent | PropTypes.string | "span" | Specify the component of the grid item. | | columnWidth | PropTypes.oneOfType([PropTypes.number, PropTypes.string]) | 150 | Specify column width as an number(px), or percentage string. (Example "33.33%") | | gutterWidth | PropTypes.number | 5 | Specify gutter width as an number. | | gutterHeight | PropTypes.number | 5 | Specify gutter height as an number. | | duration | PropTypes.number | 480 | Specify duration of animation in ms. | | easing | PropTypes.string | easings.quartOut | Specify a css valid transition-timing-function string. It can be easily specification by using easings. | | appearDelay | PropTypes.number | 30 | Specify delay of the initial animation in ms. | | appear | PropTypes.func | fadeUp.appear | See Animations section. | | appeared | PropTypes.func | fadeUp.appear | ... | | enter | PropTypes.func | fadeUp.appear | ... | | entered | PropTypes.func | fadeUp.appear | ... | | leaved | PropTypes.func | fadeUp.appear | ... | | units | PropTypes.func | { length: "px", angle: "deg" } | ... | | monitorImagesLoaded | PropTypes.bool | false | If set to true, images reading is monitored. use imagesloaded. | | vendorPrefix | PropTypes.bool | false | If set to true, add a vendor prefix to styles add dynamically. | | userAgent | PropTypes.string | undefined | Specify userAgent for determinig the vendor prefix. See inline-style-prefixer. | | enableSSR | PropTypes.bool | false | Render component on the server side. More info. | | onLayout | PropTypes.func | null | It is called at the timing when the layout is confirmed, or at the updated timing. (Called only by client.) | | horizontal | PropTypes.bool | false | The transposed (horizontal) order of drawing elements. Retains the original order of the items. | | rtl | PropTypes.bool | false | When true, items are placed right-to-left instead of the default left-to-right. Useful for RTL languages such as Arabic and Hebrew. |

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

How to manually update layout ?

If the size of an item is changed by an action such as a click event, there are cases where you want to update the layout manually.
You can manually update the layout by referring to the StackGrid instance with gridRef and executing theupdateLayout() method.

class MyComponent extends React.Component {

  // When the size of the item is changed...
  something = () => {
    this.grid.updateLayout();
  };

  render() {
    return (
      <StackGrid
        gridRef={grid => this.grid = grid}
      >
        {/* items ... */}
      </StackGrid>
    );
  }
}

Responsive layout

You can get width using react-sizeme and change columnWidth according to width.
This is a solution, but we can respond in other ways!

import React, { Component } from 'react';
import sizeMe from 'react-sizeme';
import StackGrid from 'react-stack-grid';

class YourComponent extends Component {
  render() {
    const { width } = this.props;

    return (
      <StackGrid
        // more...
        columnWidth={width <= 768 ? '100%' : '33.33%'}
      >
        // Grid items...
      </StackGrid>
    );
  }
}

export default sizeMe()(YourComponent);

Thanks

License

Released under the MIT Licence

ChangeLog

See CHANGELOG.md

Author

tsuyoshiwada

Development

Initialization of the project.

$ cd /your/project/dir
$ git clone https://github.com/tsuyoshiwada/react-stack-grid.git

Install some dependencies.

$ npm install

Start the development and can you see demo page (access to the http://localhost:3000/).

$ npm start

Run lint and testing.

$ npm test

Generates build file.

$ npm run build

Contribution

Thank you for your interest in react-stack-grid.js.
Bugs, feature requests and comments are more than welcome in the issues.

Before you open a PR:

Be careful to follow the code style of the project. Run npm test after your changes and ensure you do not introduce any new errors or warnings. All new features and changes need documentation.

Thanks!