diff --git a/CHANGELOG.md b/CHANGELOG.md index fa6b976..6ac8735 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [Unreleased] + +### Added + +- `hasPrevPage` and `hasNextPage` booleans to `SnapCarouselResult` to indicate if there's a previous or next page to scroll to. + ## [0.3.1] - 2023-02-14 ### Added diff --git a/README.md b/README.md index 8f4f7bf..f6d29b4 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,8 @@ export const Carousel = ({ scrollRef, pages, activePageIndex, + hasPrevPage, + hasNextPage, prev, next, goTo, @@ -127,9 +129,10 @@ export const Carousel = ({ @@ -148,11 +151,10 @@ export const Carousel = ({ @@ -228,6 +230,8 @@ export interface SnapCarouselResult { readonly pages: number[][]; readonly activePageIndex: number; readonly snapPointIndexes: Set; + readonly hasPrevPage: boolean; + readonly hasNextPage: boolean; readonly prev: (opts?: SnapCarouselGoToOptions) => void; readonly next: (opts?: SnapCarouselGoToOptions) => void; readonly goTo: (pageIndex: number, opts?: SnapCarouselGoToOptions) => void; diff --git a/src/use-snap-carousel.tsx b/src/use-snap-carousel.tsx index cdf2ff0..c033be8 100644 --- a/src/use-snap-carousel.tsx +++ b/src/use-snap-carousel.tsx @@ -15,6 +15,8 @@ export interface SnapCarouselResult { readonly pages: number[][]; readonly activePageIndex: number; readonly snapPointIndexes: Set; + readonly hasPrevPage: boolean; + readonly hasNextPage: boolean; readonly prev: (opts?: SnapCarouselGoToOptions) => void; readonly next: (opts?: SnapCarouselGoToOptions) => void; readonly goTo: (pageIndex: number, opts?: SnapCarouselGoToOptions) => void; @@ -201,7 +203,12 @@ export const useSnapCarousel = ({ [pages] ); + const hasPrevPage = activePageIndex > 0; + const hasNextPage = activePageIndex < pages.length - 1; + return { + hasPrevPage, + hasNextPage, prev: handlePrev, next: handleNext, goTo: handleGoTo, diff --git a/stories/carousel.tsx b/stories/carousel.tsx index 70b1946..ca325f2 100644 --- a/stories/carousel.tsx +++ b/stories/carousel.tsx @@ -32,6 +32,8 @@ export const Carousel = React.forwardRef>( ({ axis, items, renderItem, scrollMargin = false, scrollBehavior }, ref) => { const { scrollRef, + hasNextPage, + hasPrevPage, next, prev, goTo, @@ -65,7 +67,7 @@ export const Carousel = React.forwardRef>(