How to get access to open props

[kucingz]

Hi i have question how to get access to gallery open prop? For example i want to fetch data on Gallery open and i need the open prop to put it in useEffect dependecy array. Also i would like to know how to know when gallery closes something like onClose method.

[akhmadullin]

Hi

You can find example in our README

import { Gallery } from 'react-photoswipe-gallery'

const onOpen = (pswpInstance) => {
  console.log('photoswipe was opened')
  
  fetch('https://example.com')
  
  pswpInstance.on('close', () => {
   console.log('photoswipe was closed')
  })
}

const MyGallery = () => (
  <Gallery onOpen={onOpen}>
    {/*...*/}
  </Gallery>
)

if you need some state, that will store open photoswipe or not, you can create it yourself

import React, { useState } from 'react'
import { Gallery } from 'react-photoswipe-gallery'

const [isOpen, setIsOpen] = useState(false)

const onOpen = (pswpInstance) => {
  setIsOpen(true)
  console.log('photoswipe was opened')
  
  fetch('https://example.com')
  
  pswpInstance.on('close', () => {
    setIsOpen(false)
   console.log('photoswipe was closed')
  })
}

const MyGallery = () => (
  <Gallery onOpen={onOpen}>
    {/*...*/}
  </Gallery>
)

[kucingz]

okay but when i want to fetch data and set the state in this useEffect it still does not update immediately