Type error: using strings inside "colors" prop
matteo-gobbo opened this issue · comments
Matteo Gobbo commented
Hi, I'm experiencing some issues using the latest version of the library.
The project in which I'm using the library is a Vite + TypeScript + React project.
I'm using the version 3.2.1
of react-countdown-circle-timer.
I'm trying to declare the component this way:
<CountdownCircleTimer
key={countDownKey}
strokeWidth={4}
size={45}
isPlaying={!!canOpenModal}
duration={35}
colors={[COLORS.PRIMARY, COLORS.ORANGE, COLORS.RED_MAIN]}
colorsTime={[35, 16, 0]}
>
{({ remainingTime }) => remainingTime}
</CountdownCircleTimer>
but I'm receiving this type error for "colors" prop:
Type '[ColorFormat, ColorFormat, ColorFormat]' is not assignable to type 'ColorFormat | ({ 0: `#${string}`; } & { 1: `#${string}`; } & `#${string}`[])'.
Type '[ColorFormat, ColorFormat, ColorFormat]' is not assignable to type '{ 0: `#${string}`; } & { 1: `#${string}`; } & `#${string}`[]'.
Type '[ColorFormat, ColorFormat, ColorFormat]' is not assignable to type '{ 0: `#${string}`; }'.
Types of property '0' are incompatible.
Type 'ColorFormat' is not assignable to type '`#${string}`'.
Type '`rgb(${string})`' is not assignable to type '`#${string}`'
The colors constants are defined in an object like this one:
const COLORS = {
PRIMARY: "#000000",
ORANGE: "#111111",
RED_MAIN: "#222222"
}
,
Vasil Dimitrov commented
Can you try one of the two below:
const COLORS = {
PRIMARY: "#000000",
ORANGE: "#111111",
RED_MAIN: "#222222"
} as const;
or
const COLORS: Record<string, `#${string}`> = {
PRIMARY: "#000000",
ORANGE: "#111111",
RED_MAIN: "#222222"
}
Matteo Gobbo commented
It worked, thank you!