{"id":13422255,"url":"https://github.com/dantrain/react-stonecutter","last_synced_at":"2025-05-15T14:09:09.519Z","repository":{"id":49362599,"uuid":"55351138","full_name":"dantrain/react-stonecutter","owner":"dantrain","description":"Animated grid layout component for React","archived":false,"fork":false,"pushed_at":"2019-12-23T13:08:06.000Z","size":1860,"stargazers_count":1232,"open_issues_count":19,"forks_count":72,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-10T14:17:57.795Z","etag":null,"topics":["grid","grid-component","react","react-component","react-motion"],"latest_commit_sha":null,"homepage":"http://dantrain.github.io/react-stonecutter","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/dantrain.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2016-04-03T14:43:35.000Z","updated_at":"2025-04-08T11:56:19.000Z","dependencies_parsed_at":"2022-08-30T03:01:53.527Z","dependency_job_id":null,"html_url":"https://github.com/dantrain/react-stonecutter","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Freact-stonecutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Freact-stonecutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Freact-stonecutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dantrain%2Freact-stonecutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dantrain","download_url":"https://codeload.github.com/dantrain/react-stonecutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355332,"owners_count":22057354,"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":["grid","grid-component","react","react-component","react-motion"],"created_at":"2024-07-30T23:00:40.569Z","updated_at":"2025-05-15T14:09:04.505Z","avatar_url":"https://github.com/dantrain.png","language":"JavaScript","funding_links":[],"categories":["UI Layout","Uncategorized","UI Components","JavaScript","Soluções"],"sub_categories":["Form Components","Uncategorized","Layout"],"readme":"# react-stonecutter [![npm version](https://img.shields.io/npm/v/react-stonecutter.svg?style=flat)](https://www.npmjs.com/package/react-stonecutter)\n\u003ca href=\"http://dantrain.github.io/react-stonecutter\" title=\"Demo\"\u003e\u003cimg align=\"left\" src=\"http://i.imgur.com/qLCLyTN.png\" width=\"120\" hspace=\"10\"\u003e\u003c/a\u003e\n\nAnimated grid layout component for React, inspired by [Masonry](http://masonry.desandro.com/).  \nChoose between CSS Transitions or [React-Motion](https://github.com/chenglou/react-motion) for animation.\n\n[Demo](http://dantrain.github.io/react-stonecutter)  \n\n## Installation\n\nWith [npm](https://www.npmjs.com/package/react-stonecutter):\n\n```\nnpm install --save react-stonecutter\n```\n\n## Usage\n\nA simple layout with items of equal height:\n\n```js\nimport { SpringGrid } from 'react-stonecutter';\n```\n```xml\n\u003cSpringGrid\n  component=\"ul\"\n  columns={5}\n  columnWidth={150}\n  gutterWidth={5}\n  gutterHeight={5}\n  itemHeight={200}\n  springConfig={{ stiffness: 170, damping: 26 }}\n\u003e\n  \u003cli key=\"A\"\u003eA\u003c/li\u003e\n  \u003cli key=\"B\"\u003eB\u003c/li\u003e\n  \u003cli key=\"C\"\u003eC\u003c/li\u003e\n\u003c/SpringGrid\u003e\n```\n\nA Pinterest-style layout with varying item heights, this time using CSS transitions:\n\n```js\nimport { CSSGrid, layout } from 'react-stonecutter';\n```\n```xml\n\u003cCSSGrid\n  component=\"ul\"\n  columns={5}\n  columnWidth={150}\n  gutterWidth={5}\n  gutterHeight={5}\n  layout={layout.pinterest}\n  duration={800}\n  easing=\"ease-out\"\n\u003e\n  \u003cli key=\"A\" itemHeight={150}\u003eA\u003c/li\u003e\n  \u003cli key=\"B\" itemHeight={120}\u003eB\u003c/li\u003e\n  \u003cli key=\"C\" itemHeight={170}\u003eC\u003c/li\u003e\n\u003c/CSSGrid\u003e\n```\n\nTo render React components as children, wrap them in simple elements. This gives you full control of your markup:\n\n```xml\n\u003cSpringGrid\n  component=\"ul\"\n  // ...etc.\n\u003e\n  {data.map((datum) =\u003e (\n    \u003cli key={datum.id}\u003e\n      \u003cMyComponent datum={datum} /\u003e\n    \u003c/li\u003e\n  ))}\n\u003c/SpringGrid\u003e\n```\n\nIf you don't know the heights of your items ahead of time, use the `measureItems` higher-order component to measure them in the browser before layout:\n\n```js\nimport { SpringGrid, measureItems } from 'react-stonecutter';\n\nconst Grid = measureItems(SpringGrid);\n```\n```xml\n\u003cGrid\n  // ...etc.\n\u003e\n  \u003cli key=\"A\"\u003eWho controls the British crown?\u003c/li\u003e\n  \u003cli key=\"B\"\u003eWho keeps the metric system down?\u003c/li\u003e\n  \u003cli key=\"C\"\u003eWe do!\u003c/li\u003e\n  \u003cli key=\"D\"\u003eWe do!\u003c/li\u003e\n\u003c/Grid\u003e\n```\n\nIf your grid spans the page and you want to vary the number of columns based on the viewport width, use the `makeResponsive` higher-order component which makes use of [enquire.js](http://wicky.nillia.ms/enquire.js/):\n```js\nimport { CSSGrid, measureItems, makeResponsive } from 'react-stonecutter';\n\nconst Grid = makeResponsive(measureItems(CSSGrid), {\n  maxWidth: 1920,\n  minPadding: 100\n});\n```\n\n## API Reference\n\nExports:\n* `SpringGrid`\n* `CSSGrid`\n* `measureItems`\n* `makeResponsive`\n* `layout`\n* `enterExitStyle`\n* `easings`\n\n### SpringGrid and CSSGrid props\n\n**columns={`Number`}**  \nNumber of columns. Required.  \nYou can wrap the Grid component in the `makeResponsive` higher-order component to set this dynamically.\n\n**columnWidth={`Number`}**  \nWidth of a single column, by default in `px` units. Required.\n\n**gutterWidth={`Number`}**  \nWidth of space between columns. Default: `0`.\n\n**gutterHeight={`Number`}**  \nHeight of vertical space between items. Default: `0`.\n\n**component={`String`}**  \nChange the HTML tagName of the Grid element, for example to `'ul'` or `'ol'` for a list. Default: `'div'`.\n\n**layout={`Function`}**  \nUse one of the included layouts, or create your own. Defaults to a 'simple' layout with items of fixed height.  \nIncluded layouts:\n```js\nimport { layout } from 'react-stonecutter';\n\nconst { simple, pinterest } = layout;\n```\n\nThe function is passed two parameters; an `Array` of the props of each item, and the props of the Grid itself.\nIt must return an object with this shape:\n```js\n{\n  positions: // an Array of [x, y] coordinate pairs like this: [[0, 0], [20, 0], [0, 30]]\n  gridWidth: // width of the entire grid (Number)\n  gridHeight: // height of the entire grid (Number)\n}\n```\nHave a look at the code for the included layouts to get a feel for creating your own.\n\n**enter={`Function`}**  \n**entered={`Function`}**  \n**exit={`Function`}**  \nThese allow you to change how items animate as they appear and disappear from the grid.\nSupply functions that return objects with the `opacity` and `transform` values for an item's start and end states.\nBy default the item's `scale` and `opacity` go from `0` to `1` and back to `0` on exit, like this:\n```js\nenter={() =\u003e ({ scale: 0, opacity: 0 })}\nentered={() =\u003e ({ scale: 1, opacity: 1 })}\nexit={() =\u003e ({ scale: 0, opacity: 0 })}\n```\nThe functions are passed three parameters, the item props, grid props and grid state which includes the current height and width of the grid. For example to have disappearing items fall off the bottom of the grid:\n```js\nexit={(itemProps, gridProps, gridState) =\u003e ({ translateY: gridState.gridHeight + 500 })}\n```\nCSS [`transform-functions`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function) are split up so they can be easily animated individually. Supported functions:\n* `translateX`\n* `translateY`\n* `translateZ`\n* `skew`\n* `skewX`\n* `skewY`\n* `scale`\n* `scaleX`\n* `scaleY`\n* `rotate`\n* `rotateX`\n* `rotateY`  \n\nSome example functions are included:\n```js\nimport { enterExitStyle } from 'react-stonecutter';\n\nconst { enter, entered, exit } = enterExitStyle.foldUp;\n```\nCheck out the [demo](http://dantrain.github.io/react-stonecutter) to see them in action.\n\n**perspective={`Number`}**  \nThe [`perspective`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective) distance used for 3D transforms. If you are using a transform function like `rotateX`, use this to strengthen the effect. Default is no perspective applied.\n\n**lengthUnit={`String`}**  \nThe [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) unit used throughout. Default: `'px'`. Experimental. You could try using `'em'` or `'rem'` and then adjust the `font-size` for a fluid layout, but it may not work well with the `measureItems` and `makeResponsive` higher-order components. `%` does not work well due to the way CSS transforms work.\n\n**angleUnit={`String`}**  \nThe [angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) unit. Affects `transform-functions` such as `rotate`. Default: `'deg'`.\n\n### SpringGrid only props\n\n**springConfig={`Object`}**  \nConfiguration of the React-Motion spring. See the [React-Motion docs](https://github.com/chenglou/react-motion#helpers) for more info.\nDefault: `{ stiffness: 60, damping: 14, precision: 0.1 }`.\n\n### CSSGrid only props\n\n**duration={`Number`}**  \nAnimation duration in `ms`. Required.\n\n**easing={`String`}**  \nAnimation easing function in CSS [transition-timing-function](https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function) format. Some [Penner easings](https://matthewlein.com/ceaser/) are included for convenience:\n```js\nimport { easings } from 'react-stonecutter';\n\nconst { quadIn, quadOut, /* ..etc. */  } = easings;\n```\nDefault: `easings.cubicOut`.\n\n### measureItems options\nPass like this:\n```js\nconst Grid = measureItems(SpringGrid, { measureImages: true })\n```\n\n**measureImages: `Boolean`**  \nIf set to true, waits for images to load before measuring items and adding them to the Grid. This may be necessary if you don't know the height of your images ahead of time. Powered by [imagesLoaded](https://github.com/desandro/imagesloaded).\n\n**background: `Boolean|String`**  \nThis option is passed through to the [imagesLoaded](https://github.com/desandro/imagesloaded) library. It allows you to wait for background images to load, in addition to `\u003cimg\u003e` tags.\n\n### makeResponsive options\nPass like this:\n```js\nconst Grid = makeResponsive(SpringGrid, { maxWidth: 1920 })\n```\n\n**maxWidth: `Number`**  \nMaximum width for the Grid in `px`.\n\n**minPadding: `Number`**  \nMinimum horizontal length between the edge of the Grid and the edge of the viewport in `px`. Default: `0`.\n\n**defaultColumns: `Number`**  \nDefault number of columns before the breakpoints kick in. May be useful when rendering server-side in a universal app. Default: `4`.\n\n## Alternatives\n\nIf you have a list already nicely laid out by the browser, check out [React Flip Move](https://github.com/joshwcomeau/react-flip-move) which uses the very cool FLIP technique.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdantrain%2Freact-stonecutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdantrain%2Freact-stonecutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdantrain%2Freact-stonecutter/lists"}