Expose Carousel Context/Store via Render Prop/Function

Hello - this Carousel is great! Well done.

I just have one strong request that would really improve the experience for me.

I’m using the Carousel components like so:

import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, Dot } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

import config from './assets/config';
import styles from './assets/styles';

const Carousel = ({ slides, options, ...props }) => {
  const { name } = useConfig(props);

  return (
    <Module name={name} as={CarouselProvider} naturalSlideWidth={16} naturalSlideHeight={9} totalSlides={3} {...props}>
      <Component name='slider' as={Slider}>
        { slides.map((slide, index) => (<Component name='slide' as={Slide} index={index} key={index} content={slide} />)) }
      </Component>

      <Component name='navigation'>
        <Component name='control' as={ButtonBack}>Back</Component>
        <Component name='control' as={ButtonNext}>Next</Component>
      </Component>

      <Component name='pager'>
        { slides.map(($, index) => (<Component name='dot' as={Dot} slide={index} key={index} />)) }
      </Component>
    </Module>
  );
}

Carousel.defaultProps = { config, styles }

export default Carousel;

…and I need access to the currentSlide property. Using either the withStore HOC or useContext hook would be quite awkward for my setup I think.

What would be super convenient for me would be being able to access the store/context values as via a render prop/function, something like:

const Carousel = ({ slides, options, ...props }) => {
  const { name } = useConfig(props);

  return (
    <Module name={name} as={CarouselProvider} naturalSlideWidth={16} naturalSlideHeight={9} totalSlides={3} {...props}>
      {({ currentSlide }) => (
        ...
      )}
    </Module>
  );
}

…or:

const Carousel = ({ slides, options, ...props }) => {
  const { name } = useConfig(props);

  return (
    <Module name={name} as={CarouselProvider} render={({ currentSlide }) => (
      ...
    )} naturalSlideWidth={16} naturalSlideHeight={9} totalSlides={3} {...props} />
  );
}

…what are your thoughts here? If agreeable to the feature I could work on a PR.

Thanks.

[delewis13]

Bump & agree - ability to use a render function would be great. Same use-case regarding needing access to currentSlide

[tim-steele]

@esr360 I am glad you have suggestions about this project. One of the things we request when opening an issue is to use one of our templates. We have one for feature requests for features specific to this. Part of the feature request is to answer some questions around the feature. In this instance, you have thought of an alternative, but a good discussion would be why a render prop would be more ideal. Ultimately, by making the case we will ask for you to submit a PR (and when merged add you as a contributor to the front page of the project).

We have stale bot because we receive a number of Issues opened for:

• Questions that are answered in the documentation
• Problems that may or may not be related to this carousel
• Issues that don’t follow our template and are missing information
• Support questions for help debugging a project.

As much as we would like to be able to answer, help, and give everyone time and attention, that is just not realistic. We have jobs that we must attend to, and families that we go home to. Ultimately, we built this as a way to have a carousel that is un-opinionated and built in React, something that didn’t exist at the time. We open-sourced it to share the work we did with the community.

If this render prop is something you are still looking to do, and you have a good case for it, please open up a PR so we can discuss and work on it. Even if it is just a draft PR to start the conversation.