react-range-gallery

Simple react gallery with range control

Demo

http://react-range-gallery.tech/

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 = 'http://react-range-gallery.tech/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

• create-react-app
• create-react-library
• react-lazy-images

License

MIT © Andrew-Dyachenko