https://github.com/eiriklv/react-masonry-mixin

A React.js mixin for using @desandro's Masonry
https://github.com/eiriklv/react-masonry-mixin

Last synced: 2 days ago
JSON representation

A React.js mixin for using @desandro's Masonry

• Host: GitHub
• URL: https://github.com/eiriklv/react-masonry-mixin
• Owner: eiriklv
• License: mit
• Created: 2014-10-29T10:06:36.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-10-03T09:47:05.000Z (over 8 years ago)
• Last Synced: 2024-09-26T21:56:53.436Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 33.2 KB
• Stars: 175
• Watchers: 5
• Forks: 37
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-cn - react-masonry-mixin - Standalone mixin for Masonry (@desandro) (Uncategorized / Uncategorized)
• awesome-react-components-all - react-masonry-mixin - A React.js mixin for using @desandro's Masonry. (Uncategorized / Uncategorized)
• awesome-react - react-masonry-mixin - Standalone mixin for Masonry (@desandro)
• awesome-learning-resources - react-masonry-mixin - Standalone mixin for Masonry (@desandro) (Uncategorized / Uncategorized)
• awesome-list - react-masonry-mixin - A React.js mixin for using @desandro's Masonry. (Soluções / Form Components)
• awesome-react - react-masonry-mixin - A React.js mixin for using @desandro's Masonry ` 📝 6 years ago` (React [🔝](#readme))

README

        
React Masonry Mixin

===================

[![npm version](https://badge.fury.io/js/react-masonry-mixin.svg)](http://badge.fury.io/js/react-masonry-mixin)

#### Introduction:

A React.js Masonry mixin. (Also available as a [component](https://github.com/eiriklv/react-masonry-component) - you should use that instead!)

#### Live demo:

[hearsay.me (web)](http://www.hearsay.me)

[hearsay.me (github)](https://github.com/eiriklv/hearsay-frontend)

#### Usage:

* The mixin is now bundled with Masonry, so no additional dependencies needed!

* ~~You will have to use Masonry as a script dependency, as there is no complete npm module available at the moment.~~

* You can optionally include Masonry as a script tag

``

* To use the mixin

 * require the mixin and inject `React`

 * pass a reference and a masonry options object

 * make sure you use the same reference as `ref` in your component

 * if you need to - access the masonry object through `this.masonry` in your component

* example code

```js 

var React = require('react');

var MasonryMixin = require('react-masonry-mixin')(React);

 

var masonryOptions = {

    transitionDuration: 0

};

 

var SomeComponent = React.createClass({

    mixins: [MasonryMixin(React)('masonryContainer', masonryOptions)],

 

    render: function () {

        var childElements = this.props.elements.map(function(element){

           return (

                


                    {element.name}

                

            );

        });

        

        return (

            


                {childElements}

            

        );

    }

});


module.exports = SomeComponent;

```