eiriklv / react-packery-component Goto Github PK

View Code? Open in Web Editor NEW

43.0 5.0 35.0 6 KB

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

License: MIT License

JavaScript 100.00%

react-packery-component's Introduction

React Packery Component

Introduction:

A React.js Packery component. (Also available as a mixin if needed)

Support

React >= 0.14.x

Live demo:

hearsay.me

Installation:

$ npm install react-packery-component --save

Usage:

The component bundles Packery, so no additional dependencies needed!
You can optionally include Packery as a script tag if there should be any reason for doing so: <script src='//cdnjs.cloudflare.com/ajax/libs/packery/1.3.0/packery.pkgd.min.js' />
To use the component just require the module and inject React
Example code:

var React = require('react');
var Packery = require('react-packery-component')(React);

var packeryOptions = {
    transitionDuration: 0
};

var Gallery = React.createClass({
    render: function () {
        var childElements = this.props.elements.map(function(element){
           return (
                <li className="image-element-class">
                    <img src={element.src} />
                </li>
            );
        });

        return (
            <Packery
                className={'my-gallery-class'} // default ''
                elementType={'ul'} // default 'div'
                options={packeryOptions} // default {}
                disableImagesLoaded={false} // default false
            >
                {childElements}
            </Packery>
        );
    }
});

module.exports = Gallery;

react-packery-component's People

Contributors

Stargazers

Watchers

react-packery-component's Issues

Fading in child elements after images load?

First, thanks for this component; it's really been useful! :)

I have a series of child elements inside my element that each have an image inside of them. I'd like each child to be initially transparent (opacity: 0), and once the image has loaded, I'd like it to transition to opacity: 1.

I know this isn't an issue with your component, but I was wondering if you had any ideas on the best way to do with with your component.

isMounted() is depreciated (React)

Hi!
It seems this.isMounted method is depreciated. According to the Facebook's post, it's better to replace it by own property this._isMounted.

I have found out that there are a lot of long-opened PRs.
Does it make sense to contribute?

Live Demo Server Error

Just a heads-up: Your live demo at hearsay.me seems to have broken!

How to use draggabilly?

is it possible to use draggabilly with this component?

Extending Component instead of .createClass()

Hello there,

I’d like to use your Packery Component without resorting to using React’s createClass() method, and extend React.Component instead to have a full ES6 syntax.

However, the component fails to mount when doing this, as React.PropTypes is undefined in your PackeryComponent function. For the record, your react-masonry-component works great this way, as React is not undefined with it.

Is there any way I could get your Packery Component to work when extending Component without forking it? I'm quite reliant on npm management, so I'd like it to work out of the box.

Thank you!

Multiple calls on layoutComplete

componentDidMount () {
var pckry = this.refs.pckry
pckry.packery.on('layoutComplete', function() {
 console.log('layout complete')
})
            <Packery ref='pckry' className='packery'>
              {items}
            </Packery>

you can see layoutComplete being called several times after layout complete

How to call pckry.layout() from child component

Hi, this might be an implementation issue on my side, but I've a use-case where I need child components to explicitly set their height when their dimensions change, on a debounced resize event for example.

How to I call the layout() method to force re-arrange in an instance of a Packery component?

Getting a TypeError probably because of calling function rather than parameter

Hi Eirik,
I love Packery and Draggabillly. Thanks for hooking this up with React. I am having some problems connecting them however. The object I am iterating over is in a function call rather than a like the pattern you used. Can you help me make this work? Thank you so much!!

import React, { Component } from 'react'
    import { 
        Card, 
        CardImg, 
        // CardText, 
        CardBody,
        CardTitle, 
        // CardSubtitle, 
        // Button, 
        Input, 
        InputGroup, 
        // Collapse, 
        // Navbar, 
        // NavbarToggler, 
        // NavbarBrand, 
        // Nav, 
        // NavItem, 
        // NavLink, 
        Container, 
        Row, 
        // Col, 
        Jumbotron 
        } from 'reactstrap';
    import Papa from 'papaparse'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import './App.css'
    // import Packery from 'react-packery-component'

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {data: [] };   
            this.handleChange = this.handleChange.bind(this);
            this.updateData = this.updateData.bind(this)
        }
        
        handleChange(event) {
            event.preventDefault()
            const inventory = event.target.files[0]
            Papa.parse(inventory, {
                header: true,
                complete: this.updateData
            })
        } // END

        updateData(results) {
            const data = results.data
            console.log(data)
            this.setState({data}) // I have it in state. How to get it in UI?
        }
        
        renderData() {
            return  this.state.data.length > 1 
               ? this.state.data.map((item) => (
                   <Card key={item.sku} >  
                        <CardImg src={item.image} />
                        <CardTitle> {item.sku} </CardTitle>
                        <CardBody> {item.name} </CardBody>
                   </Card>

                // // PACKERY
                //    <Packery key={item.sku}>
                //         <Card >  
                //             <CardImg src={item.image} />
                //             <CardTitle> {item.sku} </CardTitle>
                //             <CardBody> {item.name} </CardBody>
                //         </Card>
                //    </Packery>
               )) 
               : null         
        }

        render() {
            return (
                <div>
                    <Jumbotron>
                        <form >
                            <InputGroup>
                                Name:
                                <Input type="file" onChange={this.handleChange} />
                            </InputGroup>
                        </form>
                    </Jumbotron>
                    
                    <div className="album">
                        <Container>
                                <Row> {this.renderData()} </Row> 
                        </Container>
                    </div>
                   
                </div>          
            );
        }
    } // END

    export default App