I'm doing a component with the FSLightbox but it looks like the isOpen state doesn't update to hide the Lightbox.
I need click on close twice.
import React, { useState } from "react"
import styled from "styled-components"
import { useStaticQuery, graphql } from "gatsby"
import { FormattedMessage } from "gatsby-plugin-intl"
import Img from "gatsby-image"
import { BrowserView } from "react-device-detect"
import ParralaxDesk from "../components/ParralaxDesktop"
import SectionMaster from "./sections/SectionsMaster"
import Lightbox from "../components/Lighbox"
import {
Title,
Paragraph,
TextContainer,
layers,
CTA
} from "../components/helpers"
const LandingKV = styled.div`
position: fixed;
width: 280px;
top: 100px;
left: 50%;
margin-left: -140px;
opacity: ${props => (props.isVisible ? 1 : 0)};
transition: opacity .3s ease-in;
${({ theme }) => theme.laptop`
bottom: inherit;
left: 75%;
top: 50%;
margin-left: 0;
transform: translate(-50%, -50%);
width: 500px;
`}
`
const Landing = () => {
const [isActive, setIsActive] = useState(true)
const [isLightBoxOpen, setIsLightBoxOpen] = useState(false)
const [lightBoxNumber, setlightBoxNumber] = useState(1)
const openLightboxOnSlide = (number) => {
setIsLightBoxOpen(true);
setlightBoxNumber(number);
}
const data = useStaticQuery(graphql`
query {
kv: file(relativePath: { eq: "landing/kv.png" }) {
childImageSharp {
fluid(maxWidth: 800, quality: 60) {
...GatsbyImageSharpFluid
}
}
}
rock1: file(relativePath: { eq: "background/rock1.png" }) {
childImageSharp {
fixed(width: 516) {
...GatsbyImageSharpFixed
}
}
}
foreground: file(relativePath: { eq: "background/foreground1.png" }) {
childImageSharp {
fixed(width: 1214) {
...GatsbyImageSharpFixed
}
}
}
}
`)
const sources = [data.kv.childImageSharp.fluid]
return (
<SectionMaster
isActive={(e) => setIsActive(e)}
theText={
<TextContainer home>
<Title>
<FormattedMessage id="titleWelcome" values={{ br: <br /> }} />
</Title>
<Paragraph>
<FormattedMessage id="textWelcome" values={{ br: <br /> }} />
</Paragraph>
</TextContainer>
}
theRest={
<>
<LandingKV isVisible={isActive}>
<CTA onClick={() => openLightboxOnSlide(2)} bottom="-80px" left="50%" center flip>Watch</CTA>
<Img fluid={sources} alt="" />
</LandingKV>
<Lightbox
showLightBox={isLightBoxOpen}
slideNumber={lightBoxNumber}
isClosing={() => setIsLightBoxOpen(false)}
sources={[
"https://cdn.beams.co.jp/img/goods/58857366854/O/58857366854_C_7.jpg",
"https://www.youtube.com/watch?v=xshEZzpS4CQ",
"https://cdn.beams.co.jp/img/goods/58857366854/O/58857366854_C_7.jpg",
"https://www.youtube.com/watch?v=xshEZzpS4CQ",
]}
captions={[
<>
<h1>Textiles</h1>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi
nibh, porta eu nisl nec, mattis dictum orci.
</p>
</>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi
nibh, porta eu nisl nec, mattis dictum orci.
</p>,
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi
nibh, porta eu nisl nec, mattis dictum orci.
</p>,
]}
/>
</>
}
/>
)
}
export default Landing
import FsLightbox from "fslightbox-react"
import React, { useState, useEffect } from "react"
export default function Lightbox(props) {
const [lightboxController, setLightboxController] = useState({
toggler: false,
number: 0
})
useEffect(() => {
setLightboxController({
toggler: props.showLightBox,
number: props.slideNumber
})
console.log('Props: ',props.showLightBox);
console.log('Toggler: ',lightboxController.toggler);
}, [props.showLightBox, props.slideNumber])
return (
<FsLightbox
toggler={lightboxController.toggler}
slide={lightboxController.number}
sources={props.sources}
captions={props.captions}
onClose={() => props.isClosing()}
svg={{
toolbarButtons: {
close: {
d:
"M7.34314575,3.10050506 L12.9998254,8.75682541 L18.6568542,3.10050506 C19.8284271,1.92893219 21.7279221,1.92893219 22.8994949,3.10050506 C24.0710678,4.27207794 24.0710678,6.17157288 22.8994949,7.34314575 L17.2418254,12.9998254 L22.8994949,18.6568542 C24.0710678,19.8284271 24.0710678,21.7279221 22.8994949,22.8994949 C21.7279221,24.0710678 19.8284271,24.0710678 18.6568542,22.8994949 L12.9998254,17.2418254 L7.34314575,22.8994949 C6.17157288,24.0710678 4.27207794,24.0710678 3.10050506,22.8994949 C1.92893219,21.7279221 1.92893219,19.8284271 3.10050506,18.6568542 L8.75682541,12.9998254 L3.10050506,7.34314575 C1.92893219,6.17157288 1.92893219,4.27207794 3.10050506,3.10050506 C4.27207794,1.92893219 6.17157288,1.92893219 7.34314575,3.10050506 Z",
},
},
slideButtons: {
previous: {
width: "13px",
height: "20px",
d:
"M10.8367585,2.57818637 L10.8549459,2.59637382 L10.8549459,2.59637382 C11.3470329,3.09877779 11.3470329,3.90244954 10.8549459,4.40485351 L5.15661713,10.2211227 L10.8549459,16.0387973 C11.3470329,16.5412013 11.3470329,17.344873 10.8549459,17.847277 C10.3758479,18.3364196 9.59093381,18.3445624 9.10179117,17.8654644 C9.09566596,17.859465 9.08960315,17.8534022 9.08360373,17.847277 L2.58868238,11.2161848 C2.31992718,10.9417949 2.19795366,10.5775417 2.22276183,10.2215835 C2.19795366,9.86610913 2.31992718,9.5018559 2.58868238,9.22746604 L9.08360373,2.59637382 C9.56270172,2.10723118 10.3476158,2.09908838 10.8367585,2.57818637 Z",
},
next: {
width: "13px",
height: "20px",
d:
"M4.34183713,2.57818637 L4.36002457,2.59637382 L4.36002457,2.59637382 L10.8549459,9.22746604 C11.1237011,9.5018559 11.2456746,9.86610913 11.2208665,10.2220673 C11.2456746,10.5775417 11.1237011,10.9417949 10.8549459,11.2161848 L4.36002457,17.847277 C3.88092658,18.3364196 3.09601247,18.3445624 2.60686983,17.8654644 L2.58868238,17.847277 L2.58868238,17.847277 C2.09659538,17.344873 2.09659538,16.5412013 2.58868238,16.0387973 L8.28561713,10.2211227 L2.58868238,4.40485351 C2.09659538,3.90244954 2.09659538,3.09877779 2.58868238,2.59637382 C3.06778037,2.10723118 3.85269449,2.09908838 4.34183713,2.57818637 Z",
},
},
}}
/>
)
}
To perfectly close the Lightbox I need to click 2 times on the close button as you can see in this video: https://cln.sh/tSUEBv
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
