Nonviolent Pirate Mobster

    react-image-tiler

    1.1.5 • Public • Published

    Image Tiler

    screencast

    Image tiler is a React component that displays images in a responsive, tiled layout.

    Installation

    $ npm install react-image-tiler

    Configuration

    The Tiler component has the following properties:

    • images - an array of image URLs to display
    • minWidth - the minimum width of an image
    • maxWidth - the maximum width of an image
    • parentWidth - a function returning the pixel width of a parent. By default, it's window.innerWidth

    Use

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Tiler from 'react-image-tiler'
     
    images = [
        'http://placekitten.com/300/300',
        'http://placekitten.com/300/300',
        'http://placekitten.com/300/300',
        'http://placekitten.com/300/300',
    ]
     
    ReactDOM.render(<Tiler images={images} minWidth="200" />, document.getElementById('foo'))

    Example

    See example/index.html.

    The example also includes a very simple InstagramFeed class that makes it easy to pull a public feed of images from someone's Instagram account. It's used in the example/index.jsx example, and also on my website

    Development

    $ npm run example

    Install

    npm i react-image-tiler

    DownloadsWeekly Downloads

    2

    Version

    1.1.5

    License

    MIT

    Last publish

    Collaborators

    • mike-douglas