{"id":13422243,"url":"https://github.com/eiriklv/react-masonry-component","last_synced_at":"2025-05-13T18:06:02.617Z","repository":{"id":35630867,"uuid":"39904885","full_name":"eiriklv/react-masonry-component","owner":"eiriklv","description":"A React.js component for using @desandro's Masonry","archived":false,"fork":false,"pushed_at":"2025-03-04T15:21:52.000Z","size":196,"stargazers_count":1457,"open_issues_count":61,"forks_count":144,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-08T08:05:43.870Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/eiriklv.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-07-29T16:46:18.000Z","updated_at":"2025-05-05T15:12:28.000Z","dependencies_parsed_at":"2024-06-18T11:20:26.460Z","dependency_job_id":"6506d173-b119-403f-a720-e5be013b78c1","html_url":"https://github.com/eiriklv/react-masonry-component","commit_stats":{"total_commits":167,"total_committers":32,"mean_commits":5.21875,"dds":"0.37125748502994016","last_synced_commit":"133552b0d9de49fb3f18928c9ec52ad1f8e35465"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiriklv%2Freact-masonry-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiriklv%2Freact-masonry-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiriklv%2Freact-masonry-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiriklv%2Freact-masonry-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eiriklv","download_url":"https://codeload.github.com/eiriklv/react-masonry-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000846,"owners_count":21997441,"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-07-30T23:00:40.253Z","updated_at":"2025-05-13T18:06:02.593Z","avatar_url":"https://github.com/eiriklv.png","language":"JavaScript","funding_links":[],"categories":["UI Layout","Uncategorized","UI Components","Soluções","JavaScript"],"sub_categories":["Form Components","Uncategorized","Layout"],"readme":"React Masonry Component\n=======================\n\n[![npm version](https://badge.fury.io/js/react-masonry-component.svg)](http://badge.fury.io/js/react-masonry-component)\n[![Build Status](https://travis-ci.org/eiriklv/react-masonry-component.svg?branch=master)](https://travis-ci.org/eiriklv/react-masonry-component)\n\n### IE8 support\nif you wish to have IE8 support, v2 with React 0.14 is the highest version available.\n\n### Table of contents\n1. [Usage](#usage)\n  1. [Basic usage](#basic-usage)\n  2. [Custom props](#custom-props)\n  3. [Accessing Masonry instance](#accessing-masonry-instance)\n  4. [Images Loaded Options](#images-loaded-options)\n  5. [Events](#events)\n\n#### Introduction:\nA React.js Masonry component. (Also available as a [mixin](https://github.com/eiriklv/react-masonry-mixin) if needed)\n\n#### Live demo:\n[hearsay.me](https://hearsay-frontend.herokuapp.com)\n\n#### Usage:\n\n* The component is bundled with Masonry, so no additional dependencies needed!\n* You can optionally include Masonry as a script tag if there should be any reason for doing so\n`\u003cscript src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' /\u003e`\n\n* To use the component just require the module.\n\n##### Basic usage\n``` npm install --save react-masonry-component```\n```jsx\nimport * as React from 'react';\nimport Masonry from 'react-masonry-component';\n\nconst masonryOptions = {\n    transitionDuration: 0\n};\n\nconst imagesLoadedOptions = { background: '.my-bg-image-el' }\n\nclass Gallery extends React.Component {\n    render() {\n        const childElements = this.props.elements.map(function(element){\n           return (\n                \u003cli className=\"image-element-class\"\u003e\n                    \u003cimg src={element.src} /\u003e\n                \u003c/li\u003e\n            );\n        });\n    \n        return (\n            \u003cMasonry\n                className={'my-gallery-class'} // default ''\n                elementType={'ul'} // default 'div'\n                options={masonryOptions} // default {}\n                disableImagesLoaded={false} // default false\n                updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false\n                imagesLoadedOptions={imagesLoadedOptions} // default {}\n            \u003e\n                {childElements}\n            \u003c/Masonry\u003e\n        );\n    }\n}\n\nexport default Gallery;\n```\n\nES6-style modules are also supported, just use:\n\n```js\nimport Masonry from 'react-masonry-component';\n```\n\n##### Custom props\nYou can also include your own custom props - EG: inline-style and event handlers.\n\n```jsx\nimport * as React from 'react';\nimport Masonry from 'react-masonry-component';\n\nconst masonryOptions = {\n    transitionDuration: 0\n};\n\nconst style = {\n    backgroundColor: 'tomato'\n};\n\nclass Gallery extends React.Component {\n    handleClick() {}\n    render() {\n        return (\n            \u003cMasonry\n                className={'my-gallery-class'}\n                style={style}\n                onClick={this.handleClick}\n            \u003e\n                {...}\n            \u003c/Masonry\u003e\n        );\n    }\n}\n\nexport default Gallery;\n```\n\n##### Accessing Masonry instance\nShould you need to access the instance of Masonry (for example to listen to masonry events)\nyou can do so by using `refs`.\n\n```jsx\nimport * as React from 'react';\nimport Masonry from 'react-masonry-component';\n\nclass Gallery extends React.Component {\n    handleLayoutComplete() { },\n\n    componentDidMount() {\n        this.masonry.on('layoutComplete', this.handleLayoutComplete);\n    },\n\n    componentWillUnmount() {\n        this.masonry.off('layoutComplete', this.handleLayoutComplete);\n    },\n\n     render() {\n         return (\n             \u003cMasonry\n                 ref={function(c) {this.masonry = this.masonry || c.masonry;}.bind(this)}\n             \u003e\n                 {...}\n             \u003c/Masonry\u003e\n         );\n     }\n}\n\nexport default Gallery;\n```\n \n##### Images Loaded Options\nReact Masonry Component uses Desandro's `imagesloaded` library to detect when images have loaded. Should you want to pass\noptions down to it then you need to populate the `imagesLoadedOptions` property on React Masonry Component.\n\nThis will most commonly be used when the elements in your gallery have CSS background images and you want to capture their\nload event. More info availabe on the [imagesloaded website](https://imagesloaded.desandro.com/#background).\n\neg:\n```jsx\nimport * as React from 'react';\nimport Masonry from 'react-masonry-component';\n\nclass Gallery extends React.Component {\n  render() {\n    const imagesLoadedOptions = { background: '.my-bg-image-el' }\n    \n    return (\n        \u003cMasonry\n            className={'my-gallery-class'}\n            elementType={'ul'}\n            options={masonryOptions}\n            imagesLoadedOptions={imagesLoadedOptions}\n        \u003e\n            \u003cdiv className=\"my-bg-image-el\"\u003e\u003c/div\u003e\n        \u003c/Masonry\u003e\n    );\n  }\n}\n\nexport default Gallery;\n```\n\n##### Events\n\n- `onImagesLoaded` - triggered when all images are loaded or after each image is loaded when `updateOnEachImageLoad` is set to `true`\n- `onLayoutComplete` - triggered after a layout and all positioning transitions have completed.\n- `onRemoveComplete` - triggered after an item element has been removed\n\n```jsx\nclass Gallery extends React.Component {\n    componentDidMount() {\n        this.hide();\n    },\n    handleImagesLoaded(imagesLoadedInstance) {\n        this.show();\n    },\n    render() {\n        return (\n            \u003cMasonry\n                onImagesLoaded={this.handleImagesLoaded}\n                onLayoutComplete={laidOutItems =\u003e this.handleLayoutComplete(laidOutItems)}\n                onRemoveComplete={removedItems =\u003e this.handleRemoveComplete(removedItems)}\n            \u003e\n                {...}\n            \u003c/Masonry\u003e\n        )\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feiriklv%2Freact-masonry-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feiriklv%2Freact-masonry-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feiriklv%2Freact-masonry-component/lists"}