React-responsive-carousel: renderArrowPrev/Next doesn't work

[chemeseddine-digit]

Hello,
As I was annoyed by the fact my arrows kept the hover style I gave them after a click on mobile and tablet device, and like my "arrows:active" override wasn't doing anything, I tried to solve this by providing my customs arrows to the Carousel :

But it's not working at all.
I'm not sure why, and the props doc I can found in Carousel.js looks pretty much like what I've did.

[MobeenAshraf]

While I am myself looking for its solution.

I checked the module code to see if these methods are exposed as props. It doesn't looks like they are!

I guess currently we can add arrow's DIVs externally and use showArrows=false for the package props. We can control selected img by updating selectedItem prop on CLICK of external Arrow divs.
I know it's not a solution but I am thinking of getting it done this way

[leandrowd]

You should remove the showArrows={false} in order to use the renderArrowPrev/renderArrowNext.

[sosnomIntent]

Hey, there is another problem but I just wanted to put this in this topic because it's related.
Actually in version 3.1.57, when you are using TypeScript renderArrowPrev/renderArrowNext are missing in module props as typings.

[chemeseddine-digit]

While I am myself looking for its solution.

I checked the module code to see if these methods are exposed as props. It doesn't looks like they are!

I guess currently we can add arrow's DIVs externally and use showArrows=false for the package props. We can control selected img by updating selectedItem prop on CLICK of external Arrow divs.
I know it's not a solution but I am thinking of getting it done this way

It's likely creating a carousel behavior in top of the lib I use to make it for me, but you're right it might be a quick temporary hacky solution :thinking:

[chemeseddine-digit]

You should remove the showArrows={false} in order to use the renderArrowPrev/renderArrowNext.

MB I didn't update the exemple, but it was not working when my default value was at true boolean.
I turned it to false here to do some tests after

[RomanVasilevOmsk]

Faced the same problem. My solution is to create a declaration file next to the component.

import { ReactNode } from 'react';
import * as carousel from 'react-responsive-carousel';

declare module 'react-responsive-carousel' {
  export interface CarouselProps {
    renderArrowPrev: (
      onClickHandler: () => void,
      hasPrev: boolean,
      label: string,
    ) => ReactNode;
  }
}

[sapkra]

@RomanVasilevOmsk I would appreciate it if you would create a PR please to add the missing props to the index.d.ts. Thanks a lot. 👍

[leandrowd]

@chemeseddine-digit, @MobeenAshraf, which version of the library are you using? Is your problem that the override doesn't work or that the renderArrowPrev/Next method is not working?

I can confirm the props are working with the latest version, I created a quick test and it looks ok to me, check it out: https://codesandbox.io/s/angry-wilbur-kcrr0?file=/src/Carousel.js

If your issue is with the override, the example you provided is not valid. The :active pseudo selector only works with links.

If you still have problems, please create an example using the codesandbox above. Thanks

[MobeenAshraf]

Hi @leandrowd, Thanks for the follow-up

I was able to override render arrow methods. I think my mistake was to not provide parameters to overridden methods.

Also as @sosnomIntent highlighted: type definitions for these methods are missing. Which is why I assumed it is not present altogether.

[leandrowd]

I'm not maintaining the existing typescript definition file, the process to keep it up to date is not automated so I rely only on the community to update it. I would accept a pull request if you are keen.

Otherwise, I created #429 to convert this component to typescript and I will be able to ensure that types are updated on any change after that is completed.

Closing this issue for now as the type definition is a completely different issue.

[wulinjie122]

@chemeseddine-digit, @MobeenAshraf, which version of the library are you using? Is your problem that the override doesn't work or that the renderArrowPrev/Next method is not working?

I can confirm the props are working with the latest version, I created a quick test and it looks ok to me, check it out: https://codesandbox.io/s/angry-wilbur-kcrr0?file=/src/Carousel.js

If your issue is with the override, the example you provided is not valid. The :active pseudo selector only works with links.

If you still have problems, please create an example using the codesandbox above. Thanks

Hi, i set showArrows to false, but it still show my customized arrow, is there anything incorrect usage ?

{
    showArrows: false,
    renderArrowPrev: (clickHandler, hasPrev, label) => {
      return (
        <span className="arrow-left" onClick={clickHandler}>
          <span className="icon-keyboard_arrow_left"></span>
        </span>
      )
    },
    renderArrowNext: (clickHandler, hasNext, label) => {
      return (
        <span className="arrow-right" onClick={clickHandler}>
          <span className="icon-keyboard_arrow_right"></span>
        </span>
      )
    }
}