Package Exports
- react-images
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-images) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Images
A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS.
Getting Started
Start by installing react-images
npm install react-imagesor
yarn add react-imagesIf you were using 0.x versions: library was significantly rewritten for 1.x version and contains several breaking changes.
The best way to upgrade is to read the docs and follow the examples.
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>
);
}
}