Using react icons for the Prev/Next in carousel

[kevinmachstudio]

Hi, using version 5.0.15 of nuka carousel. Is it possible to use a react icon (e.g. arrows) for the Prev / Next ? If so how can we go about it? I saw in an old post of using decorators property but that doesn't seem to exist anymore in this version and instead it's using fields in defaultControlsConfig that require a string or React.CSSProperties

[fritz-c]

Here's a demo of the most straightforward way to go about it: https://codesandbox.io/s/custom-button-image-i80qog?file=/src/App.js:799-877

The important part:

<NukaCarousel
  // ...
  defaultControlsConfig={{
    nextButtonText: <span>⏭</span>,
    prevButtonText: <span>⏮</span>
  }}
>

The spans are just there to show that you could plug in any element or React component you want.

[kevinmachstudio]

@fritz-c awesome that works, only thing is I'm using Typescript and am getting this error since it's expecting a string, any recommendations on how to get rid of this error?

No overload matches this call.
  Overload 2 of 2, '(props: CarouselProps, context: any): Carousel', gave the following error.
    Type 'Element' is not assignable to type 'string'.
  Overload 2 of 2, '(props: CarouselProps, context: any): Carousel', gave the following error.
    Type 'Element' is not assignable to type 'string'.ts(2769)

   <Carousel
        defaultControlsConfig={{
          nextButtonText: <MdNavigateNext />,
          prevButtonText: <MdNavigateBefore />,
        }}
      >

[fritz-c]

Yeah, unfortunately that's where the library's a bit more strict than it apparently needs to be. You could do either one of <MdNavigateNext /> as any or <MdNavigateNext /> as unknown as string and get it off your back.

[kevinmachstudio]

no problem, that works too, thanks @fritz-c