I want to render an active item on the screen as soon as the component is rendered
joaoluke opened this issue · 0 comments
joaoluke commented
I'm using the carousel to select days of the month. It only renders 5 days per slide, it turns out that if we are on the 27th of the month, it will take a long time for the user to go through the slide until the 27th.
export function ItemsCarousel({ children }: ItemsCarouselProps) {
return (
<Carousel
responsive={responsive}
autoPlay={false}
shouldResetAutoplay={false}
focusOnSelect
centerMode
containerClass="carousel-container"
itemClass="carousel-item"
>
{children}
</Carousel>
);
}
export function MonthButton({
month,
isActive,
onMonthSelect,
}: MonthButtonProps) {
return (
<Button
onClick={() => onMonthSelect(month.numeric)}
w="100%"
bg={isActive ? 'brand-orange.300' : 'transparent'}
color={isActive ? 'white' : 'brand-dark.500'}
pointerEvents={isActive ? 'none' : 'all'}
>
{month.name}
</Button>
);
}
I want to make it so that on the 27th if it is 'active' it appears on the slide on the screen as soon as the component is loaded.