Skip to main content

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

Read more about how to use them in the API (v8+) pages.

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.

wrapAround - right now, you can wrap the the front but it won't infinitely scroll like in v7.

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.