Please i've been having issue using the flickityRef, i can't wrap my head around it

[dnor-dev]

I'm using next js(typescript) and i'm trying to use a custom icon and assign the functionality to it i'm seriously having a hard time with it and any help will be appreciated, thanks.

[alts1994]

This response helped me figure it out.

If you're using a functional approach, you need to create a ref outside of the Flickity component and then define it using FlickityRef. Once that's done you can access the previous and next methods to slide the Flickity component.

const flkty = useRef(null);

function next() {
  flkty.current.next();
}

function prev() {
  flkty.current.previous();
}

... 

return (
  <div>
      <button type="button" onClick={prev}>
        Prev
      </button>

      <Flickity
        flickityRef={(carouselRef) => {
          flkty.current = carouselRef;
        }}
      >
        ...
      </Flickity>

      <button type="button" onClick={next}>
        Next
      </button>
  </div>
 )