react-imgviewer

react imgviewer project

Usage no npm install needed!

<script type="module">
  import reactImgviewer from 'https://cdn.skypack.dev/react-imgviewer';
</script>

README

react-imgviewer

[![NPM version][npm-image]][npm-url]

react react-imgviewer.

Introduction

Installation

npm install react-imgviewer --save

Usage

import React, { Component } from 'react';
import PhotoViewer from 'react-imgviewer'
import 'react-imgviewer/lib/index.css';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      activeIndex: 0,
      imagesList: [{
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      }]
    };
  }

  render() {
    return (
      <div>
          <PhotoViewer
              photos={imagesList}
              activeIndex={this.state.activeIndex}
              cwidth={300}
             />
        </div>
    );
  }
}

Props

props type default description required
photos array - image list true
cwidth number 300 photos parent container width false
cheight number 400 photos parent container height false
activeIndex number 0 active image index false
onActiveChange func callback when active image index change false
## License

MIT