title: Swiper React how to stop and start autoplay on hover with Typescript
body: <p>I am using <a href="https://swiperjs.com/swiper-api" rel="nofollow noreferrer">Swiper js</a> for my carousel and React and Typescript.</p>
  <p>Following this <a href="https://stackoverflow.com/questions/65448980/swiper-js-in-raect-how-to-stop-autoplay-onmouseenter-and-start-it-onmouseleave">post</a>, I am trying to <code>stop()</code> and <code>start()</code> autoplay on hover. I need this approach because I have to create some states when hovering the Swiper container.</p>
  <p><strong>1)</strong> I get a typescript error the <code>ref</code> property on my <code>&lt;Swiper ref={swiperRef}&gt;</code> component:</p>
  <blockquote>
  <p>Property 'ref' does not exist on type 'IntrinsicAttributes &amp; Swiper &amp;
  { children?</p>
  </blockquote>
  <p><strong>2)</strong> how do I get acces to swiper, so I can use <code>swiper.autoplay.stop();</code> inside my <code>handleMouseEnter</code> function? So I can use like:</p>
  <pre><code>const handleMouseEnter = () =&gt; {
    swiper.autoplay.stop();
   };
  </code></pre>
  <p>or like:</p>
  <pre><code>const handleMouseEnter = () =&gt; {
   swiperRef.current.swiper.autoplay.stop();
  };
  </code></pre>
  <p>This is <a href="https://codesandbox.io/s/swiper-hover-typescript-d1lng" rel="nofollow noreferrer">the sandbox</a> what I have so far.</p>
  <p>How do I get this to work using Typescript?</p>