How to access navigation events?

[mtr1990]

How can we access onNext events when 'next button' is clicked and onPrev when ' prev button' is clicked?

[igordanchenko]

@mtr1990, can you describe what you are trying to accomplish?

Have you considered using view event instead?

<Lightbox on={{ view: (index) => {} }} />

[igordanchenko]

Can you point me to a live example of a gallery with such UX?

[JurajKavka]

I found one here, but lots of big players does not have that feature in their galleries...

[igordanchenko]

Thank you for this example. While unconventional, I guess in this case you can store slide index state directly in URL query parameter, and conditionally update it when current index doesn't match the one in the URL (which effectively means the lightbox transitioned to a different slide).

Example (Next.js 13 app router)

"use client";

import * as React from "react";
import Lightbox from "yet-another-react-lightbox";
import { useRouter, useSearchParams } from "next/navigation";

import { slides } from "@/components/photos";

export default function Example() {
    const router = useRouter();
    const searchParams = useSearchParams();

    const param = searchParams.get("index");
    const index = param ? Number.parseInt(param, 10) : undefined;

    const updateIndex = (currentIndex?: number) => {
        if (index !== currentIndex) {
            const url = new URL(window.location.href);
            const queryParams = url.searchParams;

            if (currentIndex !== undefined) {
                queryParams.set("index", `${currentIndex}`);
            } else {
                queryParams.delete("index");
            }
            url.search = queryParams.toString();
            
            router.push(url.toString(), { scroll: false });
        }
    };

    return (
        <>
            <Lightbox
                slides={slides}
                index={index}
                open={index !== undefined}
                close={() => updateIndex()}
                on={{ view: ({ index: currentIndex }) => updateIndex(currentIndex) }}
            />

            <button type="button" onClick={() => updateIndex(0)}>
                Open Lightbox
            </button>
        </>
    );
}

[JurajKavka]

Hi Thank You for your help! I used that example and my gallery works as expected. I have another question - would be possible to build npm package as CommonJS moule? We are on CommonJS environment and when I start express with SSR service I get an error

 require() of ES Module /XYZ/node_modules/yet-another-react-lightbox/dist/index.js from /XYZ/node_modules/XYZ/PhotoGallery/SimplePhotoGallery.js not supported.
Instead change the require of index.js in /XYZ/PhotoGallery/SimplePhotoGallery.js to a dynamic import() which is available in all CommonJS modules.

[igordanchenko]

I have another question

Do you mind opening a separate discussion? This topic is totlly unrelated to the original question, and opening a separate discussion would give other users a chance of finding this question in the future.