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' ; Component { return <Carousel = />; }
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' ; Component state = modalIsOpen: false ; { this; }; { const modalIsOpen = thisstate; return <ModalGateway> modalIsOpen ? <Modal => <Carousel = /> </Modal> : null </ModalGateway> ; }