title: Locomotive Scroll with React 17
body: <p>I'm trying to use <a href="https://github.com/locomotivemtl/locomotive-scroll" rel="nofollow noreferrer">Locomotive Scroll</a> with React 17. I don't know how to setup the component correctly for it to work. All examples I find are for older versions of React, that I don't understand.</p>
  <p>Does anyone know how to get this to work?</p>
  <p>I'm thinking it should look something like this:</p>
  <pre><code>import React from &quot;react&quot;
  import LocomotiveScroll from &quot;locomotive-scroll&quot;
  
  
  const ComponentName = () =&gt; {
  
   //some code here
  
    return (
        &lt;div data-scroll-container&gt;
          &lt;section data-scroll-section&gt;
            &lt;h1 data-scroll&gt;Hey, there!&lt;/h1&gt;
            &lt;p
              role=&quot;img&quot;
              aria-label=&quot;&quot;
              data-scroll
              data-scroll-direction=&quot;horizontal&quot;
              data-scroll-speed=&quot;3&quot;
            &gt;
              
            &lt;/p&gt;
          &lt;/section&gt;
          &lt;section data-scroll-section&gt;
            &lt;h2 data-scroll data-scroll-speed=&quot;1&quot;&gt;
              What's up?
            &lt;/h2&gt;
            &lt;p data-scroll role=&quot;img&quot; aria-label=&quot;&quot;&gt;
              
            &lt;/p&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      );
    }
  
  export default ComponentName
  </code></pre>