GithubHelp home page GithubHelp logo

mimimimichael / react-lanelayout Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 9.12 MB

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

HTML 3.42% JavaScript 93.35% CSS 3.23%
javascript react component masonry grid layout

react-lanelayout's Introduction

alt text

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

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.

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

react-lanelayout's People

Contributors

mimimimichael avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

erikswed

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.