react-masonry-component - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #go #machine-learning #deep-learning #nodejs #macos #java #windows #awesome #kubernetes #awesome-list #ios

react-masonry-component

(★ 1,469)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- index.js
- - karma.conf.js
  - test-style.css
- react-masonry-component-test.js
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
package-lock.json
package.json
README.md
typings.d.ts
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/eiriklv/react-masonry-component

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-masonry-component

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

React Masonry Component
=======================

[![npm version](https://badge.fury.io/js/react-masonry-component.svg)](http://badge.fury.io/js/react-masonry-component)
[![Build Status](https://travis-ci.org/eiriklv/react-masonry-component.svg?branch=master)](https://travis-ci.org/eiriklv/react-masonry-component)

### IE8 support
if you wish to have IE8 support, v2 with React 0.14 is the highest version available.

### Table of contents
1. [Usage](#usage)
  1. [Basic usage](#basic-usage)
  2. [Custom props](#custom-props)
  3. [Accessing Masonry instance](#accessing-masonry-instance)
  4. [Images Loaded Options](#images-loaded-options)
  5. [Events](#events)

#### Introduction:
A React.js Masonry component. (Also available as a [mixin](https://github.com/eiriklv/react-masonry-mixin) if needed)

#### Live demo:
[hearsay.me](https://hearsay-frontend.herokuapp.com)

#### Usage:

* The component is bundled with Masonry, so no additional dependencies needed!
* You can optionally include Masonry as a script tag if there should be any reason for doing so
`<script src='//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js' />`

* To use the component just require the module.

##### Basic usage
``` npm install --save react-masonry-component```
```jsx
import * as React from 'react';
import Masonry from 'react-masonry-component';

const masonryOptions = {
    transitionDuration: 0
};

const imagesLoadedOptions = { background: '.my-bg-image-el' }

class Gallery extends React.Component {
    render() {
        const childElements = this.props.elements.map(function(element){
           return (
                <li className="image-element-class">
                    <img src={element.src} />
                </li>
            );
        });
    
        return (
            <Masonry
                className={'my-gallery-class'} // default ''
                elementType={'ul'} // default 'div'
                options={masonryOptions} // default {}
                disableImagesLoaded={false} // default false
                updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
                imagesLoadedOptions={imagesLoadedOptions} // default {}
            >
                {childElements}
            </Masonry>
        );
    }
}

export default Gallery;
```

ES6-style modules are also supported, just use:

```js
import Masonry from 'react-masonry-component';
```

##### Custom props
You can also include your own custom props - EG: inline-style and event handlers.

```jsx
import * as React from 'react';
import Masonry from 'react-masonry-component';

const masonryOptions = {
    transitionDuration: 0
};

const style = {
    backgroundColor: 'tomato'
};

class Gallery extends React.Component {
    handleClick() {}
    render() {
        return (
            <Masonry
                className={'my-gallery-class'}
                style={style}
                onClick={this.handleClick}
            >
                {...}
            </Masonry>
        );
    }
}

export default Gallery;
```

##### Accessing Masonry instance
Should you need to access the instance of Masonry (for example to listen to masonry events)
you can do so by using `refs`.

```jsx
import * as React from 'react';
import Masonry from 'react-masonry-component';

class Gallery extends React.Component {
    handleLayoutComplete() { },

componentDidMount() {
        this.masonry.on('layoutComplete', this.handleLayoutComplete);
    },

componentWillUnmount() {
        this.masonry.off('layoutComplete', this.handleLayoutComplete);
    },

render() {
         return (
             <Masonry
                 ref={function(c) {this.masonry = this.masonry || c.masonry;}.bind(this)}
             >
                 {...}
             </Masonry>
         );
     }
}

export default Gallery;
```
 
##### Images Loaded Options
React Masonry Component uses Desandro's `imagesloaded` library to detect when images have loaded. Should you want to pass
options down to it then you need to populate the `imagesLoadedOptions` property on React Masonry Component.

This will most commonly be used when the elements in your gallery have CSS background images and you want to capture their
load event. More info availabe on the [imagesloaded website](https://imagesloaded.desandro.com/#background).

eg:
```jsx
import * as React from 'react';
import Masonry from 'react-masonry-component';

class Gallery extends React.Component {
  render() {
    const imagesLoadedOptions = { background: '.my-bg-image-el' }
    
    return (
        <Masonry
            className={'my-gallery-class'}
            elementType={'ul'}
            options={masonryOptions}
            imagesLoadedOptions={imagesLoadedOptions}
        >
            <div className="my-bg-image-el"></div>
        </Masonry>
    );
  }
}

export default Gallery;
```

##### Events

- `onImagesLoaded` - triggered when all images are loaded or after each image is loaded when `updateOnEachImageLoad` is set to `true`
- `onLayoutComplete` - triggered after a layout and all positioning transitions have completed.
- `onRemoveComplete` - triggered after an item element has been removed

```jsx
class Gallery extends React.Component {
    componentDidMount() {
        this.hide();
    },
    handleImagesLoaded(imagesLoadedInstance) {
        this.show();
    },
    render() {
        return (
            <Masonry
                onImagesLoaded={this.handleImagesLoaded}
                onLayoutComplete={laidOutItems => this.handleLayoutComplete(laidOutItems)}
                onRemoveComplete={removedItems => this.handleRemoveComplete(removedItems)}
            >
                {...}
            </Masonry>
        )
    }
}
```