How to use Carousel.ControllerMixin in es6 about nuka-carousel HOT 10 CLOSED

@abhilashsajeev @benbayard In ES6 Carousel.ControllerMixin seems no more useful.
There even easier way to control your carousel (it was my need)

Just use ref to get access to backing instance of Carousel:

class myComponent extends Component {

// in render :
      <Carousel
          ref="carousel"
          decorators={CarouselDecorator}>
        ....


       // you control your Carousel without mixin
       <button
           className="btn btn-primary"
           onClick={(e)=>this.handlesNext(e)}>
            next
        </button>

// your onclick
  handlesNext(event) {
    event.preventDefault();
    // ref="carousel" so :
    this.refs.carousel.nextSlide();
  }

It works great with less code.

from nuka-carousel.

Well the Carousel.ControllerMixin was one of the important part when I am trying to call some this like this.state.carousels.carousel

anyway I have found a way to use it in ES6

class CarouselCmp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      carousels : {}
    }
    this.setCarouselData = Carousel.ControllerMixin.setCarouselData;
  }
}

from nuka-carousel.

Hey @abhilashsajeev I believe that Mixins are not support with es6 classes. If you would like to use Mixins with this component you have to use React.createClass which has the same ES5 syntax.

from nuka-carousel.

^ true story

from nuka-carousel.

anyone tried it out using react-css-modules ?

from nuka-carousel.

Confirmed. it works perfect with react-css-modules.

from nuka-carousel.

@MacKentoch Thanks for the tip! Can you please show me your full code? Would particularly like to see your CarouselDecorator variable.

By doing it this way will the controls be within the actual Carousel div, or outside? I am asking mainly because of styling purposes (placing the controls relative to their parent container).

Thanks mate

from nuka-carousel.

@MacKentoch
Is it possible to get current slide info using this refs way?

from nuka-carousel.

@JulianJorgensen sorry it makes a while I don't use this library. I just used it for an office project.

@ragefuljoe you can access anything from ref.
As an example accessing all state is:

this.refs.carousel.state

So you can access slideIndex:

this.refs.carousel.state.slideIndex

from nuka-carousel.

<Carousel ref={(c) => this.slider = c }> {carouselItems} </Carousel>

Doing the above, not able to access this.slider.state.slideIndex. Is usage different now with es6/dep of string refs?

from nuka-carousel.