{"id":20504904,"url":"https://github.com/frontend-collective/react-isometric-grid","last_synced_at":"2026-02-17T02:03:35.841Z","repository":{"id":28781391,"uuid":"117918739","full_name":"frontend-collective/react-isometric-grid","owner":"frontend-collective","description":"Isometric Grid Component :stuck_out_tongue: Inspired by Codrops Isometric Grids","archived":false,"fork":false,"pushed_at":"2023-03-04T01:37:34.000Z","size":18712,"stargazers_count":81,"open_issues_count":15,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-27T10:32:24.395Z","etag":null,"topics":["component","dynamicjs","grid","isometric","layout","masonry","react"],"latest_commit_sha":null,"homepage":"http://weiweiwu.me/react-isometric-grid/","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/frontend-collective.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-18T02:10:17.000Z","updated_at":"2025-06-10T07:01:20.000Z","dependencies_parsed_at":"2024-11-15T19:41:11.351Z","dependency_job_id":"5ea428cb-ba67-4099-82d5-03ba212f6f5c","html_url":"https://github.com/frontend-collective/react-isometric-grid","commit_stats":null,"previous_names":["wuweiweiwu/react-isometric-grid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/frontend-collective/react-isometric-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-isometric-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-isometric-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-isometric-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-isometric-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontend-collective","download_url":"https://codeload.github.com/frontend-collective/react-isometric-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-isometric-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29530210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T00:57:22.232Z","status":"online","status_checked_at":"2026-02-17T02:00:08.105Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","dynamicjs","grid","isometric","layout","masonry","react"],"created_at":"2024-11-15T19:41:07.560Z","updated_at":"2026-02-17T02:03:35.827Z","avatar_url":"https://github.com/frontend-collective.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-isometric-grids [![Build Status](https://travis-ci.org/wuweiweiwu/react-isometric-grid.svg?branch=master)](https://travis-ci.org/wuweiweiwu/react-isometric-grid) [![npm version](https://badge.fury.io/js/react-isometric-grid.svg)](https://badge.fury.io/js/react-isometric-grid)\n\nReact Isometric Grids :stuck_out_tongue: Inspired by https://github.com/codrops/IsometricGrids\n\nFeatured in Codrop [Collective 386](https://tympanus.net/codrops/collective/collective-386/)!\n\n[![NPM](https://nodei.co/npm/react-isometric-grid.png)](https://nodei.co/npm/react-isometric-grid/)\n\n## [Demo](http://weiweiwu.me/react-isometric-grid)\n\n![Example](https://media.giphy.com/media/l4pTkeY0fDzNwhMzK/giphy.gif)\n\n## Notes\n\nuse with `normalize.css` for best results across browsers.\n\n```bash\nnpm i -S normalize.css\n\n# and in index.js add\n\nimport 'normalize.css';\n```\n\n## Usage\n\n```javascript\nimport React, { Component } from 'react';\nimport IsometricGrid, { Cell } from 'react-isometric-grid';\nimport dynamics from 'dynamics.js';\n\nclass App extends Component {\n  render() {\n    function getRandomInt(min, max) {\n      return Math.floor(Math.random() * (max - min + 1)) + min;\n    }\n\n    return (\n      \u003cIsometricGrid\n        shadow\n        transform=\"rotateX(45deg) rotateZ(45deg)\"\n        stackItemsAnimation={{\n          properties: function(pos) {\n            return {\n              translateZ: (pos + 1) * 30,\n              rotateZ: getRandomInt(-4, 4),\n            };\n          },\n          options: function(pos, itemstotal) {\n            return {\n              type: dynamics.bezier,\n              duration: 500,\n              points: [\n                { x: 0, y: 0, cp: [{ x: 0.2, y: 1 }] },\n                { x: 1, y: 1, cp: [{ x: 0.3, y: 1 }] },\n              ],\n              delay: (itemstotal - pos - 1) * 40,\n            };\n          },\n        }}\n        style={{ height: '800px', width: '900px' }}\n      \u003e\n        \u003cCell\n          layers={[\n            'https://picsum.photos/600/600/?random',\n            '#9972fc',\n            '#c322a3',\n            '#9eb5c2',\n          ]}\n        /\u003e\n        \u003cCell\n          layers={[\n            'https://picsum.photos/200/300/?random',\n            '#9972fc',\n            '#c322a3',\n            '#9eb5c2',\n          ]}\n        /\u003e\n        \u003cCell\n          layers={[\n            'https://picsum.photos/400/300/?random',\n            '#9972fc',\n            '#c322a3',\n            '#9eb5c2',\n          ]}\n        /\u003e\n        \u003cCell\n          layers={[\n            'https://picsum.photos/200/500/?random',\n            '#9972fc',\n            '#c322a3',\n            '#9eb5c2',\n          ]}\n        /\u003e\n      \u003c/IsometricGrid\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## Options\n\n### Isometric Grid\n\n| Prop                                                                        | Type           | Description                                         | Default                                                                      |\n| --------------------------------------------------------------------------- | -------------- | --------------------------------------------------- | ---------------------------------------------------------------------------- |\n| children _(required)_                                                       | React elements | Cells inside the grid                               |                                                                              |\n| [perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective) | number         | px from the z axis                                  | `3000`                                                                       |\n| [transform](https://www.w3schools.com/cssref/css3_pr_transform.asp)         | string         | css transform applied to the whole grid             | `\"scale3d(0.8,0.8,1) rotateY(45deg) rotateZ(-10deg)\"`                        |\n| stackItemsAnimation                                                         | object         | animation properties for each cell using dynamic.js | below                                                                        |\n| shadow                                                                      | boolean        | Display a shadow under the cells                    | false                                                                        |\n| onGridLoaded                                                                | function       | Callback when the grid is loaded                    | `()=\u003e{}`                                                                     |\n| style                                                                       | object         | inline css styling for the inner div                | `{ height: '600px', width: '600px', position: 'absolute', left: 0, top: 0 }` |\n\n#### stackItemsAnimation prop example\n\ndynamic.js animations parameters\n\n```javascript\n{\n  // object of the properties/values you want to animate\n  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function\n  properties(pos) {\n    return {\n      rotateX: (pos + 1) * -15,\n    };\n  },\n  // object representing the animation like duration and easing\n  // https://github.com/michaelvillar/dynamics.js#dynamicsanimateel-properties-options\n  options(pos, totalItems) {\n    return {\n      type: dynamics.spring,\n      delay: (totalItems - pos - 1) * 30,\n    };\n}\n```\n\n### Cell\n\n| Prop                | Type            | Description                                                                                     | Default                                                              |\n| ------------------- | --------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |\n| layers _(required)_ | array of string | what each layer is in the cell. \u003cbr/\u003e Can be image urls or valid css colors                     |                                                                      |\n| href                | string          | url that the image will link to when clicked                                                    | `null`                                                               |\n| onClick             | function        | what is executed when the image is clicked. If using with `href`, be sure to `preventDefault()` | `null`                                                               |\n| title               | string          | title that is under the layers. Shown on mouse over                                             | `null`                                                               |\n| style               | object          | inline styling for the Cell component                                                           | `{ width: '200px', height: '200px', transformStyle: 'preserve-3d' }` |\n| layerStyle          | object          | inline styling for each inner layer                                                             | `{ width: '200px', height: '200px' }`                                |\n## Compatibility \n\nIt is compatible in browsers where `transform-style: 3d` is supported.\n\n![chart](https://image.ibb.co/gH1R16/Screen_Shot_2018_01_29_at_10_07_54_PM.png)\n\n## Troubleshooting\n\n**z-animations aren't working** Make sure you dont have `overflow` css property set. That messes up z-axis animations. https://stackoverflow.com/questions/21248111/overflow-behavior-after-using-css3-transform\n\n**2d animations are acting weird** in the `style` prop of cell. set `transformStyle: flat` SEE [#9](https://github.com/wuweiweiwu/react-isometric-grid/issues/9) https://www.w3schools.com/cssref/css3_pr_transform-style.asp\n\n**The axis of rotation is weird or not what you want** set the `transformOrigin` property of `layerStyle` prop of Cell. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin\n\n## Contributing\n\nAfter cloning the repository and running `npm install` or `yarn install` inside, you can use the following commands to develop and build the project.\n\n```sh\n# Starts a webpack dev server that hosts a demo page with the component.\n# It uses react-hot-loader so changes are reflected on save.\nnpm start\n# or \nyarn start\n\n# Start the storybook, which has several different examples to play with.\n# Also hot-reloaded.\nnpm run storybook\n# or \nyarn storybook\n\n# Runs the library tests\nnpm test\n# or \nyarn test\n\n# Lints the code with eslint\nnpm run lint\n# or\nyarn lint\n\n# Lints and builds the code, placing the result in the dist directory.\n# This build is necessary to reflect changes if youre\n#  `npm link`-ed to this repository from another local project.\nnpm run build\n# or \nyarn build\n```\n\nPull requests are welcome!\n\n## License\n\nMIT\n\n## Credits\n\n* [Codrops](http://www.codrops.com)\n* [Masonry](http://masonry.desandro.com/) by David DeSandro.\n* [Dynamics.js](http://dynamicsjs.com/) by Michael Villar.\n* [Unsplash](http://unsplash.com)\n* Dribbble artists: [Mike](https://dribbble.com/creativemints), [Forefathers](https://dribbble.com/forefathers), [Julian Lavallee](https://dribbble.com/JulienLavallee), [Cosmin Capitanu](https://dribbble.com/Radium)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-collective%2Freact-isometric-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontend-collective%2Freact-isometric-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-collective%2Freact-isometric-grid/lists"}