Breakpoints not working due typescript Interface

[yangricardo]

Hi, I' am trying to use this lib in a typescript application. When i try to define the breakpoints, it fails to transpile from typescript with the following error:

TypeScript error in /home/yang/pfc_frontend/src/components/YACarousel/index.tsx(23,11):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<CarouselProps>): default', gave the following error.
    Type '{ 640: { plugins: { resolve: CarouselPluginFunc; options: { numberOfSlides: number; }; }[]; }; 900: { plugins: { resolve: CarouselPluginFunc; options: { numberOfSlides: number; }; }[]; }; }' is not assignable to type 'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | "plugins" | "itemWidth" | "slides" | "animationSpeed">'.
      Object literal may only specify known properties, and '640' does not exist in type 'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | "plugins" | "itemWidth" | "slides" | "animationSpeed">'.
  Overload 2 of 2, '(props: CarouselProps, context?: any): default', gave the following error.
    Type '{ 640: { plugins: { resolve: CarouselPluginFunc; options: { numberOfSlides: number; }; }[]; }; 900: { plugins: { resolve: CarouselPluginFunc; options: { numberOfSlides: number; }; }[]; }; }' is not assignable to type 'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | "plugins" | "itemWidth" | "slides" | "animationSpeed">'.
      Object literal may only specify known properties, and '640' does not exist in type 'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | "plugins" | "itemWidth" | "slides" | "animationSpeed">'.  TS2769

    21 |         itemWidth={400}
    22 |         breakpoints={{
  > 23 |           640: {
       |           ^
    24 |             plugins: [
    25 |               {
    26 |                 resolve: slidesToShowPlugin,

My code is:

import React from 'react';
import Carousel, { slidesToShowPlugin } from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
import ClientImage from '../../assets/cardClient.svg';
import { Container } from './styles';
import ClientItem from '../ClientItem';

const YACarousel: React.FC = () => {
  return (
    <Container>
      <Carousel
        plugins={[
          'arrows',
          {
            resolve: slidesToShowPlugin,
            options: {
              numberOfSlides: 2,
            },
          },
        ]}
        itemWidth={400}
        breakpoints={{
          640: {
            plugins: [
              {
                resolve: slidesToShowPlugin,
                options: {
                  numberOfSlides: 1,
                },
              },
            ],
          },
          900: {
            plugins: [
              {
                resolve: slidesToShowPlugin,
                options: {
                  numberOfSlides: 2,
                },
              },
            ],
          },
        }}
      >
        <ClientItem
          imgSrc={ClientImage}
          publisher={`Lucas Salles - Camisa do Santos F.C autografada`}
          message={`"Estou muito feliz pela minha compra, vou poder guardar essa lembrança do Santos!"`}
        />
        <ClientItem
          imgSrc={ClientImage}
          publisher={`Lucas Salles - Camisa do Santos F.C autografada`}
          message={`"Estou muito feliz pela minha compra, vou poder guardar essa lembrança do Santos!"`}
        />
        <ClientItem
          imgSrc={ClientImage}
          publisher={`Lucas Salles - Camisa do Santos F.C autografada`}
          message={`"Estou muito feliz pela minha compra, vou poder guardar essa lembrança do Santos!"`}
        />
      </Carousel>
    </Container>
  );
};
export default YACarousel;

The Client component is just a div with a Card like layout. Without the breakpoint, it works.

Another thing i found, is the interface:

export interface CarouselProps {
    itemWidth?: number;
    value?: number;
    onChange?(value: number): void;
    slides?: JSX.Element[];
    offset?: number;
    draggable?: boolean;
    animationSpeed?: number;
    className?: string;
    breakpoints?: Pick<CarouselProps, Exclude<keyof CarouselProps, "breakpoints">>;
    plugins?: Array<string|CarouselPluginTypes>;
}

It's like there is something missing, to use the set breakpoint numbers properly, but i'm not sure...

[qchuchu]

Yep I had the same problem on my project. It's because the breakpoint type is not good. If you change your node modules types to :

interface CarouselBreakpoint {
    [breakpointNumber: number]: Pick<CarouselProps, Exclude<keyof CarouselProps, "breakpoints">>
}

export interface CarouselProps {
    itemWidth?: number;
    value?: number;
    onChange?(value: number): void;
    slides?: JSX.Element[];
    offset?: number;
    draggable?: boolean;
    animationSpeed?: number;
    className?: string;
    breakpoints?: CarouselBreakpoint;
    plugins?: Array<string|CarouselPluginTypes>;
}

It will work properly :)

I will propose a PR soon to fix it !

[knnhcn]

hi @qchuchu, is there any update on that?

On the latest versions I still get the typing breakpoints?: Pick<CarouselProps, Exclude<keyof CarouselProps, "breakpoints" | "plugins">>; which doesn't seem to work.

[Lokom17]

Hi, @qchuchu do you have any updates regarding breakpoints?

[mhraihan]

this issues does not slove yet, sad :/

[qchuchu]

I just created a PR on DefinitelyTyped : https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55862 - I'm kinda of new to this but I think I did it the right way. Maybe if you can upvote it, that would help to give more visibility ;)

Sorry for the delay, as I had a short notice to finish my project last time, I decided to use another library. But I think we need to make this change as it keeps annoying people ;)

[qchuchu]

My PR has been merged ! You should be able to use breakpoints now ;) You just need to upgrade your @types/brainhubeu__react-carousel, and I think we can close this issue :)