[Feature] Initial page index #1090
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| if (initialPage) { | ||
| setCurrentPage(Math.max(0, Math.min(initialPage, totalPages))); | ||
| } | ||
| }, [initialPage, totalPages]); |
There was a problem hiding this comment.
This new version makes it render at index 0 and slide to index 1. Seemed to be working better with the previous code.
There was a problem hiding this comment.
Ah, yeah that was what I was commenting about #1090 (comment)
There was a problem hiding this comment.
This is fixed in fcb0049
| @@ -176,7 +186,7 @@ export const Carousel = forwardRef<SlideHandle, CarouselProps>( | |||
| )} | |||
| <div className="nuka-slide-container"> | |||
| <div | |||
| className="nuka-overflow" | |||
| className={`nuka-overflow ${currentReachedInitialPage ? 'scroll-smooth' : 'scroll-auto'}`} | |||
There was a problem hiding this comment.
Good thinking, I think you can simplify and prevent an extra re-render by the following
Add the following code to the existing useEffect after line 154
if (initialPage !== undefined && currentPage === initialPage) {
containerRef.current.classList.remove('scroll-auto');
containerRef.current.classList.add('scroll-smooth');
}
This eliminates the extra useEffect and state tracking.
There was a problem hiding this comment.
Oh yeah that seems a lot better, added in 33f52d6! I also fixed up the logic, I think it should be
if (initialPage === undefined || currentPage === initialPage) {...
That way if the initialPage isn't specified, it'll just revert back to smooth scrolling
Description
Adds a new prop for the carousel to start on any page index. This is related to #1073 and helps with the v7 to v8+ prop migration.
In v7, there was a
slideIndexprop so users could dictate what slide should be showing at a given time. This was half remedied by thegoToSlide()method where users could manually update the indicies, but users still couldn't specify an index to start with on load. I've addedinitialPagethat's plugged into the default value for the use-paging useState with a fallback to 0. This is specified in the updated prop pages.Fixes #1073
Type of Change
How Has This Been Tested?
Tested in browser in Storybook (added a story) and with unit tests.
Checklist
pnpm run lint)pnpm run test:ci-with-server/pnpm run test)pnpm changeset.