A highly impartial suite of React components that can be assembled by the consumer to create a carousel with almost no limits on DOM structure or CSS styles. If you're tired of fighting some other developer's CSS and DOM structure, this carousel is for you.
const CarouselData = ({ onSlideUpdate }: ICarouselDataProps) => {
const carouselContext = useContext(CarouselContext);
useEffect(() => {
function onChange() {
//I've just done this to make the test pass, for some reason in jest the context would return the correct state, then would return NaN, breaking the tests. Doesn't appear to be an issue in the real world. Couldn't think of another solution
const newSlide = typeof isNaN(carouselContext.state.currentSlide)
? 0
: carouselContext.state.currentSlide;
onSlideUpdate(newSlide);
}
carouselContext.subscribe(onChange);
return () => carouselContext.unsubscribe(onChange);
}, [carouselContext, onSlideUpdate]);
return null;
};
What you did:
I was trying to test some of the UI associated with the carousel. We have some buttons that enabled/disabled depending on which slide you're on.
What happened:
Console.logging out the state.currentSlide I could see on the first render pass in the test it shows the correct slide number, but on the second time it returned 'NaN'
pure-react-carouselversion: 1.28.1reactversion: 17.0.2browserused: jest / js-dom 28.1.3nodeversion: 18.13Relevant code or config:
What you did:
I was trying to test some of the UI associated with the carousel. We have some buttons that enabled/disabled depending on which slide you're on.
What happened:
Console.logging out the
state.currentSlideI could see on the first render pass in the test it shows the correct slide number, but on the second time it returned 'NaN'Reproduction: