一个强大的react图片预览|一个强大的react图片预览 react-images 组件
文章图片
image.png
文章图片
image.png
import React, { useState, useEffect } from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';
const Lightbox = (props) => {
const { images = [], open, onClose } = props;
const [modalIsOpen, setModalIsOpen] = useState(open)
useEffect(() => {
setModalIsOpen(open)
}, [images, open])const toggleModal = () => {
setModalIsOpen(!modalIsOpen)
if (typeof onClose === 'function') {
onClose()
}}
const styleInit = {
header: (base, state) => ({ //头部样式
position: 'absolute',
top: 90,
right: 90,
zIndex: 9999,
}),
view: (base, state) => ({
textAlign: 'center',
height: state.isFullscreen?'100%':600//当点击全屏的时候图片样式
})
}
return (
{modalIsOpen ? (
) : null}
);
}export default Lightbox
推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 迷失的世界（二十七）
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态，但孝顺这件事，我希望每一个人都不留遗憾