Skip to content

Latest commit

 

History

History
141 lines (108 loc) · 34.3 KB

README.md

File metadata and controls

141 lines (108 loc) · 34.3 KB

react-range-gallery

Simple react gallery with range control

NPM JavaScript Style Guide

Demo

https://andrew-dyachenko.github.io/react-range-gallery/

Attention!

The project is at the stage of early development. Project is't stable yet. Please use it if you really need!

Touch

NO touch events yet supported! Will coming with -beta...

Install

npm install --save react-range-gallery

or

yarn add react-range-gallery

Usage

Usage example implies to use create-react-app boilerplate

App.js

import React, { Component } from "react";
import RangeGallery from "react-range-gallery";

export default class App extends Component {
    render() {
        return (
            <RangeGallery>
                {
                    Array(20)
                        .fill(0)
                        .map((element, index) => {
                            return (
                                <img
                                    src="https://loremflickr.com/g/480/480/owl/all"
                                    alt={`Example ${index}`}
                                    key={index}
                                />
                            );
                        })
                }
            </RangeGallery>
        );
    }
}

Lazy images load

App.js

import React, { Component } from "react";
import RangeGallery, { RangeLazyImage } from "react-range-gallery";
const preloader =
    "https://raw.githubusercontent.com/Andrew-Dyachenko/react-range-gallery/master/example/src/preloader.gif";

export default class App extends Component {
    render() {
        return (
            <RangeGallery>
                {
                    Array(20)
                        .fill(0)
                        .map((element, index) => {
                            return (
                                <RangeLazyImage
                                    src="https://loremflickr.com/g/480/480/owl/all"
                                    alt={`Example ${index}`}
                                    key={index}
                                    fakeSrc={preloader}
                                />
                            );
                        })
                }
            </RangeGallery>
        );
    }
}

The RangeLazyImage is based on react-lazy-images, which you can optionally read about here.

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

API Reference

Name Type Default isRequired Description
children Array of Nodes
or
Node		 null false Any DOM nodes you wanted to render
className String range-gallery true Main gallery class.
Sub dependent components will inherit this class in BEM style format.
Example: className="block__element--modificator"
conrollerClassName String range-conroller true Main controller class
slidesToShow Number 1 true Slides quantity to show.
All slides separating to groups visible at the moment
slidesToScroll Number 1 true Slides quantity to slide.
All slides separating to groups visible at the moment
slidesPerRow Number 1 true The number of rows in one slides group.
For example: If the number of slides is six 6 and the number of rows is two 2, then each row will have three 3 slides separated by a horizontal indent
breakpoint Number 0 true Simply start responsive point.
It is NOT recommended to change. This option will probably be removed in the future
responsive Array [
    {
        breakpoint: 0,
        slidesToShow: 1,
        slidesToScroll: 1,
        slidesPerRow: 1
    },
    {
        breakpoint: 480,
        slidesToShow: 2,
        slidesToScroll: 2,
        slidesPerRow: 1
    },
    {
        breakpoint: 768,
        slidesToShow: 3,
        slidesToScroll: 3,
        slidesPerRow: 1
    },
    {
        breakpoint: 1024,
        slidesToShow: 4,
        slidesToScroll: 4,
        slidesPerRow: 1
    },
    {
        breakpoint: 1366,
        slidesToShow: 5,
        slidesToScroll: 5,
        slidesPerRow: 1
    },
    {
        breakpoint: 1600,
        slidesToShow: 6,
        slidesToScroll: 6,
        slidesPerRow: 2
    },
    {
        breakpoint: 1920,
        slidesToShow: 8,
        slidesToScroll: 8,
        slidesPerRow: 2
    }
]		 false Use this Array of Objects to describe how your gallery should look like at different screen resolutions. You can make any number of rows and columns. Gallery powered by CSS GRID. Use CSS to decorate it to your needs
dataList Boolean false false The aditional HTML <datalist> element contains a set of <option> elements that represent the values available for input range control.
You can use it as well as decoration of your <input type="range"> track

Libraries

This package is mainly bootstrapping and builded with next libraries

License

MIT © Andrew-Dyachenko