react-range-gallery v1.0.5-alpha

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

Libraries

This package is mainly bootstrapping and builded with next libraries

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

License

MIT © Andrew-Dyachenko