Aviscous-images NPM

React Images

A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS.

Getting Started

Start by installing react-images

yarn add react-images

Using the Carousel

Import the carousel from react-images at the top of a component and then use it in the render function.

import React from 'react';
import Carousel from 'react-images';

const images = [{ src: 'path/to/image-1.jpg', src: 'path/to/image-2.jpg' }];

class Component extends React.Component {
  render() {
    return <Carousel views={images} />;
  }
}

Using the Modal

Import the modal and optionally the modal gateway from react-images at the top of a component and then use it in the render function.

The ModalGateway will insert the modal just before the end of your <body /> tag.

import React from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';

const images = [{ src: 'path/to/image-1.jpg', src: 'path/to/image-2.jpg' }];

class Component extends React.Component {
  state = { modalIsOpen: false };
  toggleModal = () => {
    this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
  };
  render() {
    const { modalIsOpen } = this.state;

    return (
      <ModalGateway>
        {modalIsOpen ? (
          <Modal onClose={this.toggleModal}>
            <Carousel views={images} />
          </Modal>
        ) : null}
      </ModalGateway>
    );
  }
}

react images carousel lightbox gallery modal

a11y-focus-store glam raf-schd react react-dom react-full-screen react-scrolllock react-transition-group react-view-pager

@infinitebrahmanuniverse/nolb-avi @everything-registry/sub-chunk-1190

1.0.0-alpha.2

6 years ago