react-lanelayout

A component to display items with specific aspect ratios in horizontal or vertical lanes.

How it works

<LaneLayout/> fits itself into the closest parent-element which is relative or absolutely positioned. Based on your lane- & gutter- configuration and the available space, it adjusts the amounts of lanes accordingly. It iterates over your items and distributes them evenly throughout the lanes. Mousewheel events are captured and transformed so that even in horizontal-mode users can scroll with a standard mousewheel.

Features

• solid: responsive, works on mobile/desktop, touch/non-touch
• fast: renders only currently visible items into the DOM
• hassle-free: handles z-index of hovered items
• smart: captures wheel-events to unify scrolling in horizontal-/vertical-model
• fancy: allows to autoscroll with different speeds

Demo

Clickedy Click

Installation

npm install react-lanelayout --save

Usage

Usage is straight forward. Reasonable defaults are set, so after correctly formating your items a basic example looks like this:

import React from 'react'
import ReactDOM from 'react-dom'
import LaneLayout from 'react-lanelayout'

import MyItemRenderer from './MyItemRenderer'
import {items, moreItemsFunc} from './my-fancy-api'

const App = ({items, moreItemsFunc}) => <div>
    <LaneLayout items={items} itemRenderer={MyItemRenderer} onEnd={() => moreItemsFunc()}/>
</div>;

const target = document.getElementById("root");
ReactDOM.render(<App items={items} moreItemsFunc={moreItemsFunc} />, target);

API

| Prop | Type | Default | Description | |---|---|---|---| | items | Array | [] | your properly formatted items | lanes | Object | click | configures lane behavior | debug | Bool | false | adds debug outlines to every DOM-element generated by <LaneLayout/> | | horizontal | Bool | false | enables horizontal mode | gutter | Number | 16 | spacing between items in px | outerGutter | Bool | true | apply the gutter also around items | itemRenderer | Func | n/a | the function or React component used to render a single item | onEnd | Func | n/a | function which is triggered when the user scrolled till the end | autoScroll | Bool / Number | false | enables / disables autoscrolling and or sets the scroll-speed

Lane Configuration

To configure the amount of lanes you can hand over a lane-configuration object. The default looks like this:

const lanes = {
      vertical: {
        0: 1,   // 1 lane  if the component is at least 0px wide
        480: 2, // 2 lanes if the component is min. 480px wide
        720: 3, // 3 lanes if the component is min. 720px wide
        960: 4, // ...
        1200: 5 // 5 lanes if the component is 1200 or more px wide
      },
      horizontal: {
        0: 1,   // 1 lane when the component is at least 0px in height
        480: 2, // 2 lanes when the component is min 480px in height
        720: 3, // 3 lanes when the component is min 720px in height
        960: 4, // ... got it? ...
        1200: 5 // 5 lanes if the component is 1200px or more in height
      }
    }

You can read it basically like this:

const lanes = {
    vertical: {
        MIN_WIDTH: AMOUNT_OF_LANES
    },
    horizontal: {
        MIN_HEIGHT: AMOUNT_OF_LANES
    }
}

Add as many breakpoints as you think make sense for your project.

Formatting Items

To correctly display your items, <LaneLayout/> needs to know the aspect ratio of them. This is the format of an item that <LaneLayout/> expects:

 const item = {
    key: 1,         // a unique identifier
    ratio: 4 / 3,   // the width / height ratio of your item
    itemProps: {    // your actual item
        foo: 'bar'
    }
  };

Example:

You want to display photos. The shape of a photo-item looks like this:

const photo = {
    id: 12345,
    url: 'https://example.com/photo1.jpg',
    width: 800,
    height: 600
}

This translates to the following item-shape:

const item = {
    key: photo.id,
    ratio: photo.width / photo.height,
    itemProps: photo
}

Transform a whole collection:

const items = photos.map(photo=>{
    return {
        key: photo.id,
        ratio: photo.width / photo.height,
        itemProps: photo
    }
});

License

MIT