Add support for the overflow event

[marbiano]

Related Issues

#56

Description

This PR fixes the lack of an overflow event to the React version of Splide.

[tom-bywild]

Thanks for the work, would greatly appreciate if this PR could be merged soon! I'm currently using an intersection observer as workaround, but would be nice if we could use the native API.

[KieronWiltshire]

@tom-bywild mind sharing that observer code with me until this get's merged?

[tom-bywild]

For anyone else coming across the same issue, you can actually use the Splide API for it. Here's a simple piece of code to determine what end of container should show its control (React code), the callback names map to the respective names on the Splide-element.

  const [visibleControls, setVisibleControls] = useState<[boolean, boolean]>([false, false]);

  const onMounted = useCallback((instance: Splide) => {
    const end = instance.Components.Controller.getEnd();
    setVisibleControls(() => [false, end !== 0]);
  }, []);

  const onMove = useCallback((instance: Splide, i: number) => {
    const end = instance.Components.Controller.getEnd();
    setVisibleControls(() => [i !== 0, i !== end]);
  }, []);

  const onOverflow = useCallback((_: Splide, isOverflow: boolean) => {
    setVisibleControls((prev) => [prev[0], isOverflow]);
  }, []);

---

Edit: I forgot to mention that I used package-patch to patch the PRs changes into my code.

[KieronWiltshire]

@tom-bywild I'm trying to get this working... but it doesn't seem to work.
@marbiano I have tweeted the creator, hopefully this is merged soon.

const onOverflow = useCallback((splide: Splide, isOverflow: boolean) => {
        console.log(isOverflow);
        splide.options = {
            arrows: isOverflow,
            drag: isOverflow,
            autoStart: isOverflow
        };
        splide.Components?.AutoScroll?.pause();
    }, []);

[marbiano]

@NaotoshiFujita do you mind taking a quick look at this and merging it? Thank you!

[puck3000]

@NaotoshiFujita : indeed a fix for this would be really appreciated! any plans on merging the pr?

[SergioVanacloigCarlsberg]

@NaotoshiFujita Hey! It has been a while since this PR was created, would it be possible to merge it? Thank you in advance

[KieronWiltshire]

Hello?????

[SergioVanacloigCarlsberg]

In the meantime I made it work using patch-package

This is the code generated when running patch-package with the changes I made in case is useful for you

diff --git a/node_modules/@splidejs/react-splide/dist/js/react-splide.cjs.js b/node_modules/@splidejs/react-splide/dist/js/react-splide.cjs.js
index 85cddb7..fda6a1d 100644
--- a/node_modules/@splidejs/react-splide/dist/js/react-splide.cjs.js
+++ b/node_modules/@splidejs/react-splide/dist/js/react-splide.cjs.js
@@ -2636,7 +2636,8 @@ var EVENTS = [
[EVENT_AUTOPLAY_PLAY, "onAutoplayPlay"],
[EVENT_AUTOPLAY_PLAYING, "onAutoplayPlaying"],
[EVENT_AUTOPLAY_PAUSE, "onAutoplayPause"],

• [EVENT_LAZYLOAD_LOADED, "onLazyLoadLoaded"]

• [EVENT_LAZYLOAD_LOADED, "onLazyLoadLoaded"],
• [EVENT_OVERFLOW, "onOverflow"]
  ];

// src/js/utils/classNames/classNames.ts
diff --git a/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js b/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js
index 0b19767..4bf6303 100644
--- a/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js
+++ b/node_modules/@splidejs/react-splide/dist/js/react-splide.esm.js
@@ -2602,7 +2602,8 @@ var EVENTS = [
[EVENT_AUTOPLAY_PLAY, "onAutoplayPlay"],
[EVENT_AUTOPLAY_PLAYING, "onAutoplayPlaying"],
[EVENT_AUTOPLAY_PAUSE, "onAutoplayPause"],

• [EVENT_LAZYLOAD_LOADED, "onLazyLoadLoaded"]

• [EVENT_LAZYLOAD_LOADED, "onLazyLoadLoaded"],
• [EVENT_OVERFLOW, "onOverflow"]
  ];

// src/js/utils/classNames/classNames.ts
diff --git a/node_modules/@splidejs/react-splide/dist/types/types/events.d.ts b/node_modules/@splidejs/react-splide/dist/types/types/events.d.ts
index 68631d8..31c1f41 100644
--- a/node_modules/@splidejs/react-splide/dist/types/types/events.d.ts
+++ b/node_modules/@splidejs/react-splide/dist/types/types/events.d.ts
@@ -28,6 +28,7 @@ export declare type SplideEventHandlerMap = {
onAutoplayPlaying: 'autoplay:playing';
onAutoplayPause: 'autoplay:pause';
onLazyLoadLoaded: 'lazyload:loaded';

• onOverflow: 'overflow';
  };
  export declare type SplideEventHandlers = {
  [K in keyof SplideEventHandlerMap]: (splide: Splide, ...args: Parameters<EventMap[SplideEventHandlerMap[K]]>) => ReturnType<EventMap[SplideEventHandlerMap[K]]>;
  diff --git a/node_modules/@splidejs/react-splide/src/js/constants/events.ts b/node_modules/@splidejs/react-splide/src/js/constants/events.ts
  index d48b48d..ae9b31b 100644
  --- a/node_modules/@splidejs/react-splide/src/js/constants/events.ts
  +++ b/node_modules/@splidejs/react-splide/src/js/constants/events.ts
  @@ -27,6 +27,7 @@ import {
  EVENT_SCROLLED,
  EVENT_UPDATED,
  EVENT_VISIBLE,
• EVENT_OVERFLOW,
  EventMap,
  } from '@splidejs/splide';
  import { SplideEventHandlerMap } from '../types';
  @@ -61,4 +62,5 @@ export const EVENTS: Array<[ keyof EventMap, keyof SplideEventHandlerMap ]> = [
  [ EVENT_AUTOPLAY_PLAYING, 'onAutoplayPlaying' ],
  [ EVENT_AUTOPLAY_PAUSE, 'onAutoplayPause' ],
  [ EVENT_LAZYLOAD_LOADED, 'onLazyLoadLoaded' ],
• [ EVENT_OVERFLOW, 'onOverflow' ],
  ];
  diff --git a/node_modules/@splidejs/react-splide/src/js/types/events.ts b/node_modules/@splidejs/react-splide/src/js/types/events.ts
  index f165df1..ebaf14b 100644
  --- a/node_modules/@splidejs/react-splide/src/js/types/events.ts
  +++ b/node_modules/@splidejs/react-splide/src/js/types/events.ts
  @@ -30,6 +30,7 @@ export type SplideEventHandlerMap = {
  onAutoplayPlaying: 'autoplay:playing';
  onAutoplayPause: 'autoplay:pause';
  onLazyLoadLoaded: 'lazyload:loaded';
• onOverflow: 'overflow';
  }

export type SplideEventHandlers = {

[jasien-eurostar]

Bump, I'd like to make use of this too :) @NaotoshiFujita

[jasien-eurostar]

Bumping for @Seresigo too