{"id":13544122,"url":"https://github.com/tsuyoshiwada/react-stack-grid","last_synced_at":"2025-05-13T12:54:11.097Z","repository":{"id":41097692,"uuid":"254083808","full_name":"tsuyoshiwada/react-stack-grid","owner":"tsuyoshiwada","description":null,"archived":false,"fork":false,"pushed_at":"2021-05-14T15:51:28.000Z","size":7838,"stargazers_count":181,"open_issues_count":17,"forks_count":34,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-27T18:02:48.099Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsuyoshiwada.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-08T12:39:14.000Z","updated_at":"2025-03-03T18:40:05.000Z","dependencies_parsed_at":"2022-08-23T03:41:22.815Z","dependency_job_id":null,"html_url":"https://github.com/tsuyoshiwada/react-stack-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsuyoshiwada%2Freact-stack-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsuyoshiwada%2Freact-stack-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsuyoshiwada%2Freact-stack-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsuyoshiwada%2Freact-stack-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsuyoshiwada","download_url":"https://codeload.github.com/tsuyoshiwada/react-stack-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948328,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T11:00:42.410Z","updated_at":"2025-05-13T12:54:11.071Z","avatar_url":"https://github.com/tsuyoshiwada.png","language":"JavaScript","readme":"# react-stack-grid\n\n[![Build Status](http://img.shields.io/travis/tsuyoshiwada/react-stack-grid.svg?style=flat-square)](https://travis-ci.org/tsuyoshiwada/react-stack-grid)\n[![npm version](https://img.shields.io/npm/v/react-stack-grid.svg?style=flat-square)](http://badge.fury.io/js/react-stack-grid)\n\n\nPinterest like layout components for React.js.\n\n\n\n\n## Table of Contents\n\n* [Live Demo](#live-demo)\n* [Install](#install)\n* [Quick Example](#quick-example)\n* [Props](#props)\n* [Instance API](#instance-api)\n  * [updateLayout(): void](#updatelayout-void)\n* [Animations](#animations)\n* [Tips](#tips)\n  * [Performance when using images](#performance-when-using-images)\n  * [When animation is unnecessary](#when-animation-is-unnecessary)\n  * [How to manually update layout ?](#how-to-manually-update-layout-)\n  * [Responsive layout](#responsive-layout)\n* [Thanks](#thanks)\n* [License](#license)\n* [ChangeLog](#changelog)\n* [Author](#author)\n* [Development](#development)\n* [Contribution](#contribution)\n\n\n\n\n## Live Demo\n\n![Screenshot](https://raw.githubusercontent.com/tsuyoshiwada/react-stack-grid/images/screenshot.png)\n\n[https://tsuyoshiwada.github.io/react-stack-grid/](https://tsuyoshiwada.github.io/react-stack-grid/)\n\n\n\n\n## Install\n\nYou can install the [react-stack-grid](https://www.npmjs.com/package/react-stack-grid) from [npm](https://www.npmjs.com/).\n\n```bash\n$ npm install react-stack-grid\n```\n\n\n\n\n## Quick Example\n\nFollowing code is simplest usage.\n\n```javascript\nimport React, { Component } from \"react\";\nimport StackGrid from \"react-stack-grid\";\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      \u003cStackGrid\n        columnWidth={150}\n      \u003e\n        \u003cdiv key=\"key1\"\u003eItem 1\u003c/div\u003e\n        \u003cdiv key=\"key2\"\u003eItem 2\u003c/div\u003e\n        \u003cdiv key=\"key3\"\u003eItem 3\u003c/div\u003e\n      \u003c/StackGrid\u003e\n    );\n  }\n}\n```\n\nwidth of parent is managed by [react-sizeme](https://github.com/ctrlplusb/react-sizeme).\n\n\n\n\n## Props\n\nYou can set the following properties.\n\n| Property              | Type                                                        | Default                          | Description                                                                                                                             |\n|:----------------------|:------------------------------------------------------------|:---------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------|\n| `className`           | `PropTypes.string`                                          | `undefined`                      | Specify `className` of component.                                                                                                       |\n| `style`               | `PropTypes.object`                                          | `{}`                             | Original style of component. Following styles are ignored. (`position`, `height`, `transition`)                                         |\n| `gridRef`             | `PropTypes.func`                                            | `null`                           | Reference the instance of StackGrid. Unlike ordinary `ref`, it accepts only functions.                                                  |\n| `component`           | `PropTypes.string`                                          | `\"div\"`                          | See [ReactTransitionGroup](https://facebook.github.io/react/docs/animation.html#rendering-a-different-component)                        |\n| `itemComponent`       | `PropTypes.string`                                          | `\"span\"`                         | Specify the component of the grid item.                                                                                                 |\n| `columnWidth`         | `PropTypes.oneOfType([PropTypes.number, PropTypes.string])` | `150`                            | Specify column width as an number(`px`), or percentage string. (Example `\"33.33%\"`)                                                     |\n| `gutterWidth`         | `PropTypes.number`                                          | `5`                              | Specify gutter width as an number.                                                                                                      |\n| `gutterHeight`        | `PropTypes.number`                                          | `5`                              | Specify gutter height as an number.                                                                                                     |\n| `duration`            | `PropTypes.number`                                          | `480`                            | Specify duration of animation in ms.                                                                                                    |\n| `easing`              | `PropTypes.string`                                          | `easings.quartOut`               | Specify a css valid transition-timing-function string. It can be easily specification by using `easings`.                               |\n| `appearDelay`         | `PropTypes.number`                                          | `30`                             | Specify delay of the initial animation in ms.                                                                                           |\n| `appear`              | `PropTypes.func`                                            | `fadeUp.appear`                  | See Animations section.                                                                                                                 |\n| `appeared`            | `PropTypes.func`                                            | `fadeUp.appear`                  | ...                                                                                                                                     |\n| `enter`               | `PropTypes.func`                                            | `fadeUp.appear`                  | ...                                                                                                                                     |\n| `entered`             | `PropTypes.func`                                            | `fadeUp.appear`                  | ...                                                                                                                                     |\n| `leaved`              | `PropTypes.func`                                            | `fadeUp.appear`                  | ...                                                                                                                                     |\n| `units`               | `PropTypes.func`                                            | `{ length: \"px\", angle: \"deg\" }` | ...                                                                                                                                     |\n| `monitorImagesLoaded` | `PropTypes.bool`                                            | `false`                          | If set to `true`, images reading is monitored. use [imagesloaded](https://github.com/desandro/imagesloaded).                            |\n| `vendorPrefix`        | `PropTypes.bool`                                            | `false`                          | If set to `true`, add a vendor prefix to styles add dynamically.                                                                        |\n| `userAgent`           | `PropTypes.string`                                          | `undefined`                      | Specify userAgent for determinig the vendor prefix. See [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer). |\n| `enableSSR`           | `PropTypes.bool`                                            | `false`                          | Render component on the server side. [More info](https://github.com/ctrlplusb/react-sizeme#server-side-rendering).                      |\n| `onLayout`            | `PropTypes.func`                                            | `null`                           | It is called at the timing when the layout is confirmed, or at the updated timing. (Called only by client.)                             |\n| `horizontal`          | `PropTypes.bool`                                            | `false`                          | The transposed (horizontal) order of drawing elements. Retains the original order of the items.                                         |\n| `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.    |\n\n\n## Instance API\n\n### updateLayout(): void\n\nUpdate the current layout.\n\n\n\n\n## Animations\n\nThe following function must return styles related to animation.  \nSee [ReactTransitionGroup](https://facebook.github.io/react/docs/animation.html#rendering-a-different-component) for details.\n\n* `appear`\n* `appeared`\n* `enter`\n* `entered`\n* `leaved`\n\nYou can use extended syntax for transform's style. For example properties like `translateX` and` scale`.  \nSee [easy-css-transform-builder](https://github.com/tsuyoshiwada/easy-css-transform-builder).\n\nEach function is given the following arguments.\n\n* `rect: { top: number; left: number; width: number; height: number; }`\n* `containerSize: { width: number; height: number; }`\n* `index: number`\n\nIt is easiest to use them because you have several presets.\n\n* `fade`\n* `fadeDown`\n* `fadeUp`\n* `scaleDown`\n* `scaleUp`\n* `flip`\n* `helix`\n\nIt's an actual use example.\n\n```javascript\nimport StackGrid, { transitions } from \"react-stack-grid\";\n\nconst { scaleDown } = transitions;\n\nclass MyComponent extends Component {\n  render() {\n    return (\n      \u003cStackGrid\n        ...\n        appear={scaleDown.appear}\n        appeared={scaleDown.appeared}\n        enter={scaleDown.enter}\n        entered={scaleDown.entered}\n        leaved={scaleDown.leaved}\n      \u003e\n        ...\n      \u003c/StackGrid\u003e\n    );\n  }\n}\n```\n\nPlease try actual demonstration in [live demo](https://tsuyoshiwada.github.io/react-stack-grid/).\n\n\n\n\n## Tips\n\n\n### Performance when using images\n\nWhen `true` is specified for `monitorImagesLoaded`, reloading occurs when the image loading is completed.  \nIf you know the size in advance, specify `monitorImagesLoaded` as `false`.\n\n\n### When animation is unnecessary\n\nBy default animation is enabled.  \nIf it's not necessary, specify `0` for `duration` property.\n\n```javascript\n\u003cStackGrid\n  ...\n  duration={0}\n\u003e\n  ...\n\u003c/StackGrid/\u003e\n```\n\n\n### How to manually update layout ?\n\nIf 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.  \nYou can manually update the layout by referring to the StackGrid instance with `gridRef` and executing the`updateLayout()` method.\n\n```javascript\nclass MyComponent extends React.Component {\n\n  // When the size of the item is changed...\n  something = () =\u003e {\n    this.grid.updateLayout();\n  };\n\n  render() {\n    return (\n      \u003cStackGrid\n        gridRef={grid =\u003e this.grid = grid}\n      \u003e\n        {/* items ... */}\n      \u003c/StackGrid\u003e\n    );\n  }\n}\n```\n\n\n### Responsive layout\n\nYou can get width using [react-sizeme](https://github.com/ctrlplusb/react-sizeme) and change columnWidth according to width.  \nThis is a solution, but we can respond in other ways!\n\n```javascript\nimport React, { Component } from 'react';\nimport sizeMe from 'react-sizeme';\nimport StackGrid from 'react-stack-grid';\n\nclass YourComponent extends Component {\n  render() {\n    const { \n      size: { \n        width\n      } \n    } = this.props;\n\n    return (\n      \u003cStackGrid\n        // more...\n        columnWidth={width \u003c= 768 ? '100%' : '33.33%'}\n      \u003e\n        // Grid items...\n      \u003c/StackGrid\u003e\n    );\n  }\n}\n\nexport default sizeMe()(YourComponent);\n```\n\n\n\n\n\n## Thanks\n\n* Layout inspired by [Pinterest](https://pinterest.com/).\n* API inspired by [dantrain/react-stonecutter](https://github.com/dantrain/react-stonecutter).\n\n\n\n\n## License\n\nReleased under the [MIT Licence](https://raw.githubusercontent.com/tsuyoshiwada/react-stack-grid/master/LICENSE)\n\n\n\n\n## ChangeLog\n\nSee [CHANGELOG.md](./CHANGELOG.md)\n\n\n\n\n## Author\n\n[tsuyoshiwada](https://github.com/tsuyoshiwada)\n\n\n\n\n## Development\n\nInitialization of the project.\n\n```bash\n$ cd /your/project/dir\n$ git clone https://github.com/tsuyoshiwada/react-stack-grid.git\n```\n\nInstall some dependencies.\n\n```bash\n$ npm install\n```\n\nStart the development and can you see demo page (access to the `http://localhost:3000/`).\n\n```bash\n$ npm start\n```\n\nRun lint and testing.\n\n```bash\n$ npm test\n```\n\nGenerates build file.\n\n```bash\n$ npm run build\n```\n\n\n\n## Contribution\n\nThank you for your interest in react-stack-grid.js.  \nBugs, feature requests and comments are more than welcome in the [issues](https://github.com/tsuyoshiwada/react-stack-grid/issues).\n\n**Before you open a PR:**\n\nBe 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.\nAll new features and changes need documentation.\n\nThanks!\n","funding_links":[],"categories":["UI Layout","Soluções"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsuyoshiwada%2Freact-stack-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsuyoshiwada%2Freact-stack-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsuyoshiwada%2Freact-stack-grid/lists"}