Skip to content

Commit

Permalink
feat: add scroll behavior config for navigation
Browse files Browse the repository at this point in the history
when navigation programmatically
to a different page via
- `goTo`
- `prev`
- `next`
  • Loading branch information
pantajoe authored Jan 19, 2024
1 parent c1e5395 commit 0cdf28c
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 12 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,9 +228,9 @@ export interface SnapCarouselResult {
readonly pages: number[][];
readonly activePageIndex: number;
readonly snapPointIndexes: Set<number>;
readonly prev: () => void;
readonly next: () => void;
readonly goTo: (pageIndex: number) => void;
readonly prev: (opts?: SnapCarouselGoToOptions) => void;
readonly next: (opts?: SnapCarouselGoToOptions) => void;
readonly goTo: (pageIndex: number, opts?: SnapCarouselGoToOptions) => void;
readonly refresh: () => void;
readonly scrollRef: (el: HTMLElement | null) => void;
}
Expand Down
30 changes: 21 additions & 9 deletions src/use-snap-carousel.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
import { useState, useCallback, useEffect, useMemo } from 'react';
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';

interface SnapCarouselGoToOptions {
/**
* The scroll behavior of the navigation
* when prompted to navigate to another page.
*
* @default 'smooth'
*/
readonly behavior?: ScrollBehavior;
}

export interface SnapCarouselResult {
readonly pages: number[][];
readonly activePageIndex: number;
readonly snapPointIndexes: Set<number>;
readonly prev: () => void;
readonly next: () => void;
readonly goTo: (pageIndex: number) => void;
readonly prev: (opts?: SnapCarouselGoToOptions) => void;
readonly next: (opts?: SnapCarouselGoToOptions) => void;
readonly goTo: (pageIndex: number, opts?: SnapCarouselGoToOptions) => void;
readonly refresh: () => void;
readonly scrollRef: (el: HTMLElement | null) => void;
}
Expand Down Expand Up @@ -145,7 +155,7 @@ export const useSnapCarousel = ({
};
}, [refreshActivePage, pages, scrollEl]);

const handleGoTo = (index: number) => {
const handleGoTo = (index: number, opts?: SnapCarouselGoToOptions) => {
if (!scrollEl) {
return;
}
Expand All @@ -164,20 +174,22 @@ export const useSnapCarousel = ({
leadEl,
nearSidePos
);

const behavior = opts?.behavior || 'smooth'
// NOTE: I've tried `leadEl.scrollIntoView` but it often fails in chrome on Mac OS.
scrollEl.scrollTo({
behavior: 'smooth',
behavior,
[nearSidePos]:
getOffsetRect(leadEl, leadEl.parentElement)[nearSidePos] - scrollSpacing
});
};

const handlePrev = () => {
handleGoTo(activePageIndex - 1);
const handlePrev = (opts?: SnapCarouselGoToOptions) => {
handleGoTo(activePageIndex - 1, opts);
};

const handleNext = () => {
handleGoTo(activePageIndex + 1);
const handleNext = (opts?: SnapCarouselGoToOptions) => {
handleGoTo(activePageIndex + 1, opts);
};

const snapPointIndexes = useMemo(
Expand Down

0 comments on commit 0cdf28c

Please sign in to comment.