Problem: Close button "X" is faded even after passing an onClose prop

[usman64]

Code:
{isImageViewerOpen && (
<Lightbox
images={images}
startIndex={imageIndex}
onClose={() => setIsImageViewerOpen(false)}
/>
)}

[theanam]

the close button doesn't have any disable state. Does it close the lightbox when clicked? or functionality is also affected?

[usman64]

Hi Anam, It does affect the functionality it's working perfectly fine, but the only issue here is that it is faded which in terms of UX gives the user an impression that the button is disabled. So, you could fix this it'll be great just need to tweak the CSS a bit.

…

----- Regards, Muhammad Usman Tariq Lahore University of Management Sciences (LUMS) BS Computer Science | 2020 <https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/> View LinkedIn Profile<https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/>

________________________________ From: Anam Ahmed <[email protected]> Sent: Friday, October 2, 2020 6:38 PM To: theanam/react-awesome-lightbox <[email protected]> Cc: Muhammad Usman Tariq <[email protected]>; Author <[email protected]> Subject: Re: [theanam/react-awesome-lightbox] Problem: Close button "X" is faded even after passing an onClose prop (#4) the close button doesn't have any disable state. Does it close the lightbox when clicked? or functionality is also affected? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#4 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJOYJ3IZWOFSSUIS3QL66IDSIXJV5ANCNFSM4R45QPKQ>.

[usman64]

Correction: It does NOT affect the functionality.

…

----- Regards, Muhammad Usman Tariq Lahore University of Management Sciences (LUMS) BS Computer Science | 2020 <https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/> View LinkedIn Profile<https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/>

________________________________ From: Muhammad Usman Tariq <[email protected]> Sent: Friday, October 2, 2020 7:02 PM To: theanam/react-awesome-lightbox <[email protected]> Subject: Re: [theanam/react-awesome-lightbox] Problem: Close button "X" is faded even after passing an onClose prop (#4) Hi Anam, It does affect the functionality it's working perfectly fine, but the only issue here is that it is faded which in terms of UX gives the user an impression that the button is disabled. So, you could fix this it'll be great just need to tweak the CSS a bit.

----- Regards, Muhammad Usman Tariq Lahore University of Management Sciences (LUMS) BS Computer Science | 2020 <https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/> View LinkedIn Profile<https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/>

________________________________ From: Anam Ahmed <[email protected]> Sent: Friday, October 2, 2020 6:38 PM To: theanam/react-awesome-lightbox <[email protected]> Cc: Muhammad Usman Tariq <[email protected]>; Author <[email protected]> Subject: Re: [theanam/react-awesome-lightbox] Problem: Close button "X" is faded even after passing an onClose prop (#4) the close button doesn't have any disable state. Does it close the lightbox when clicked? or functionality is also affected? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#4 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJOYJ3IZWOFSSUIS3QL66IDSIXJV5ANCNFSM4R45QPKQ>.

[tlhbyrz]

OnClose function triggers funtionality. In order to use Lightbox you should write something like that:

{ postDetail.image && <> <p> <img src={imageSrc} onClick={toggleLightbox} /> </p> { light && <Lightbox image={imageSrc} title="Image Title" onClose={toggleLightbox} /> } </> }

in toggleLightbox function you should toggle light state.

[anisharya16]

OnClose function triggers funtionality. In order to use Lightbox you should write something like that:

{ postDetail.image && <> <p> <img src={imageSrc} onClick={toggleLightbox} /> </p> { light && <Lightbox image={imageSrc} title="Image Title" onClose={toggleLightbox} /> } </> }

in toggleLightbox function you should toggle light state.

For me, Close button was not working for me and in console i found the error that onClose was not implemented and this answer gave me an idea to implement this. Thanks.