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 (
<ModalGateway >
{modalIsOpen ? (
<Modal onClose={toggleModal} >
<Carousel views={images} styles={styleInit}/>
</Modal>
) : null}
</ModalGateway>
);
}
export default Lightbox
一個強大的react圖片預覽 react-images 組件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.