Hooks and useContext

Hi all,

Thanks for doing this project!

Am I missing something or the usage CarouselContext with hooks aren’t supported yet?

I follow the example on the README file, but it looks like CarouselContext it’s empty: https://github.com/express-labs/pure-react-carousel/blob/master/src/CarouselProvider/context.js#L3

I did exactly as it says:

import React, { useContext, useEffect, useState } from 'react';
import { CarouselContext } from 'pure-react-carousel';

export function MyComponentUsingContext() {
  const carouselContext = useContext(CarouselContext);
  const [currentSlide, setCurrentSlide] = useState(carouselContext.state.currentSlide);
  useEffect(() => {
    function onChange() {
      setCurrentSlide(carouselContext.state.currentSlide);
    }
    carouselContext.subscribe(onChange);
    return () => carouselContext.unsubscribe(onChange);
  }, [carouselContext]);
  return `The current slide is: ${currentSlide}`;
}

But this constant carouseContext is returning undefined:

const carouselContext = useContext(CarouselContext); // it returns undefined

Any ideas why?

Thanks!

[misshu1]

Hello, in my opinion, the problem is with the <CarouselProvider /> you can’t use the context and the provider in the same component, move the provider one level up, that should work 😃

[theone3nu]

Here is the example

`  
const Carousel = ({ schools, onSchoolHover }) => {
    
    return (
        <CarouselProvider
            totalSlides={schools.length}
            naturalSlideWidth={1}
            naturalSlideHeight={1}
        >
            <Slider>
                {schools.map((school, index) => {
                    return (
                        <Slide className="custom-slider-height" index={index}>
                           
                        </Slide>
                    )
                }
                )}

            </Slider>
                    <MyComponentUsingContext onSliderChange={onSchoolHover }/>
           
        </CarouselProvider>
    )
}

export default Carousel;`

Where MyComponentUsingContext is

import React, { useContext, useEffect, useState } from 'react';
import { CarouselContext } from 'pure-react-carousel';

export function MyComponentUsingContext({ onSliderChange }) {
  const carouselContext = useContext(CarouselContext);
  const [currentSlide, setCurrentSlide] = useState(carouselContext.state.currentSlide);
  useEffect(() => {
    function onChange() {
      setCurrentSlide(carouselContext.state.currentSlide);
     if(currentSlide !== carouselContext.state.currentSlide) onSliderChange(carouselContext.state.currentSlide)
    }
    carouselContext.subscribe(onChange);
    return () => carouselContext.unsubscribe(onChange);
  }, [carouselContext]);
  return `The current slide is: ${currentSlide}`;
}