react-image-closeup v1.0.0

react-image-closeup

This a lightweight component for displaying a single image in a fullscreen lightbox. Comes with magnfication capabilities.

Features:

• Open up a full-sized image in full-screen modal
• Zoom In/Zoom out and drag it around
• Specify number of magnification steps
• Uses css animations

Demo

Here is a Demo of the component in action!

Installation

npm

npm install react-image-closeup --save

Usage

import React, { Component } from 'react';
import ReactImageCloseup from 'react-image-closeup';

class SampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen: false,
    }
  }

  render() {
    return (
      <div>
        {
          this.state.modalOpen ?
            <ReactImageCloseup
              closeModalFunc={() => { this.setState({modalOpen: false}); }}
              imageSrc="http://via.placeholder.com/2000x2000"
            /> :
            null
        }
        <button
          onClick={() => { this.setState({modalOpen: true}); }}
        >
          Open Image
        </button>
      </div>
    )
  }
}

Props

Versioning

SemVer standards are used for versioning