react-3dgallery

an adaptation of this gallery

Demo

live demo

Install

npm install --save @absolom/react-3dgallery

Usage

import React, { Component } from 'react'

import Gallery from '@absolom/react-3dgallery'

class Example extends Component {
  render () {
    return (
      <Gallery
          images={[
            {src: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg'},
            {src: 'https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg'},
            {src: 'https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg'},
            {src: 'https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_960_720.jpg'},
            {src: 'https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg'},
          ]}
          backButton={({className}) => <button className={className} onClick={() => console.log("back action")}>Back</button>}
        />
    )
  }
}

All Properties

images = [
  {
    src: "url of image (required)",
    text: "optional label"
  },
  ...
]

background = {
  color: "optional color of background, default #000000",
  image: "url of optional background image"
}

backButton // a React element, like a button or link (required)

To-do

• add option to set corner where the back button appears
• add option to set fullscreen display
• change the names of the variables for more explicit names
• continue to adapt the code to React logic

License

MIT © abs0lom