v8 Upgrade Guide
Nuka v8 and above are completely rewritten with new props and might not be completely backwards compatable with v7.
New Props
scrollDistance
showPageIndicators
pageIndicatorProps
className
Changed Props
afterSlide
beforeSlide
- implemented with some changes from v7
Removed Props
adaptiveHeight
- The carousel should adapt automatically to the height of the items in the carousel without the need of this prop.
adaptiveHeightAnimation
- The carousel should adapt automatically to the height of the items in the carousel without the need of this prop.
carouselId
cellAlign
- this should just be controlled through passed CSS (prop className
).
cellSpacing
- this should just be controlled through passed CSS.
defaultControlsConfig
disableAnimation
- should just be controlled through passed CSS.
dragging
- this is always on, it defaults to the OS/browser settings.
dragThreshold
- this defaults to the OS/browser settings.
easing
- should just be controlled through passed CSS.
edgeEasing
- should just be controlled through passed CSS.
enableKeyboardControls
- this should be native without interference. If the content is focusable through normal tabbing, it will focus.
keyCodeConfig
- should be native.
landmark
renderTop{direction}Controls
- build your own next/prev controls with the goBack() and goForward() exposed methods.
scrollMode
- always on remainder
for now.
slideIndex
slidesToScroll
- renamed to scrollDistance.
slidesToShow
- now based on media queries and how large the slides are.
speed
- should be native.
style
- pass styles through the className if needed.
swiping
- default to OS/browser settings.
tabbed
- should be native.
withoutControls
- controls are not rendered by default. Use methods to build your own next/prev triggers or style the page controls with showPageIndicators
and pageIndicatorProps
.
zoomScale
- should just be controlled through passed CSS.
Props in consideration
These v7 and below props are being worked on or are considered for v8.
disableEdgeSwiping
- This might just be covered natively by browser/os. Not entirely sure yet.
frameAriaLabel
- would like to do sweeping functionality and docs update for all accessibility things
onDragStart
- in theory should be the same as beforeSlide
but the debounce is too late for manual scrolling for this to really be effective.
onDrag
- considering the use case for this, this would involve writing a shorter debounce on a useEffect that runs this function every time the scrollIndex changes.
onDragEnd
- in theory should be the same as afterSlide
since dragging with a touch device will trigger afterSlide
after the scroll listening debounce ends.
onUserNavigation
- would like to do sweeping functionality and docs update for all accessibility things
pauseOnHover
- not implemented, not documented.
showDefaultButtons?
- would be a new prop and not sure about the naming. The idea would be that there's built in forward/back buttons that don't require the user to use the imperative handle hooks. It would likely have a className for styling and children property, but also unsure about how to organize it.