Breakpoints not working due typescript Interface

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]

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]

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 !