react-blackbox v1.0.1

React Images Viewer

A simple react component for displaying an array of images.

Quick start

npm install --save react-blackbox

import React from 'react';
import Blackbox from 'react-image-viewer';

export default class Example extends React.Component {
  ...
  render() {
    return (
      <Blackbox
        images={[{ src: 'http://example.com/img1.jpg' }, { src: 'http://example.com/img2.jpg' }]}
        isOpen={this.state.blackBoxIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeBlackbox}
      />
    );
  }
}

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Example using caption for the first image:

<Blackbox
  images={Blackbox_IMAGE_SET}
  ...
/>

const BlackBox_IMAGE_SET = [
  {
    src: 'http://example.com/example/img1.jpg',
    caption: 'Sydney, Australia - Photo by Jill Smith',
  },
  {
    src: 'http://example.com/example/img2.jpg',
  }
];

Options