CODEWITHSUNDEEP
reactjssliderreact-component
Usr
Usr

Reputation: 2838

ReactJS Slider carousel component

Following some code examples, I've found this:

<Slider ref = {c => (this.slider = c)} {...this.settings}>
        {
          //custom component for slider content
        }
      </Slider>

I don't get what's the meaning of ref = {c => (this.slider = c)} {...this.settings}. What is this doing? this.settings is an object with various properties, like arrows:false, mobilefirst:true. But I don't know this construct of ref etc. and in the example is not explained.
Is there a guide for this?

Upvotes: 0

Views: 457

Answers (1)

bananaspy
bananaspy

Reputation: 551

This code creates reference to the element to work with it later - it is stored on the class and can be accessed with this.slider or passed down as a prop to children. For example, it can be used to set focus just like with regular HTML element: this.slider.focus(). You can read more about callback refs here: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs

Upvotes: 1

Related Questions