How to call the methods using react hooks.

[Shofol]

What is the process to call the methods (to, next, etc.) in react hooks? Please update the README.md or give an answer here.

[jmdmacapagal]

+1 on this I cant figure it out

[diegohennrich]

What is the process to call the methods (to, next, etc.) in react hooks? Please update the README.md or give an answer here.

Hi There!

We can call methods using the hook useRef, like this:

import React, { FC, useRef, useCallback } from 'react';

import ReactOwlCarousel from 'react-owl-carousel';

const MyCarousel: FC = () => {
  const banners = [
    'https://i0.wp.com/www.lifecaretechnology.com/wp-content/uploads/2018/12/default-banner.jpg',
    'https://docs.aws.amazon.com/pt_br/quickstart/latest/linux-bastion/images/default-linux-bastion-banner.png',
  ];
  const RefCarousel = useRef<ReactOwlCarousel>(null);

  const handleNav = useCallback(
    (action: 'prev' | 'next') => {
      if (!RefCarousel.current) return;
      // 0.2 is the speed
      if (action === 'prev') {
        RefCarousel.current?.prev(0.2);
      } else {
        RefCarousel.current?.next(0.2);
      }
    },
    [RefCarousel]
  );

  return (
    <div>
      <ReactOwlCarousel
        key={`my_carousel`}
        nav={false}
        items={1}
        ref={RefCarousel}
        children={banners.map((i: string) => (
          <img key={i} src={i} />
        ))}
      />

      <div>
        <img
          style={{ width: 30, marginRight: 20 }}
          onClick={() => handleNav('prev')}
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Arrow_left.svg/1280px-Arrow_left.svg.png"
        />
        <img
          style={{ width: 30 }}
          onClick={() => handleNav('next')}
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Arrow_right.svg/1280px-Arrow_right.svg.png"
        />
      </div>
    </div>
  );
};

export default MyCarousel;

[andelh]

Did anyone get this working? @diegohennrich 's method didn't seem to do it for me :( .