react-infinite-ticker

React component that scrolls children infinitely.

Usage no npm install needed!

<script type="module">
  import reactInfiniteTicker from 'https://cdn.skypack.dev/react-infinite-ticker';
</script>

README

react-infinite-ticker

React component that scrolls children infinitely.

Demo

See here.

Quick start

npm install react-infinite-ticker
import React from "react";
import { VerticalTicker, HorizontalTicker } from "react-infinite-ticker";

function App() {
  const [ref, scroll] = useScrollTo();

  return (
    <div>
      <VerticalTicker>
        <div>Put anything you want</div>
        <img src="/images/as/well.png" />
        <h1>All good</h1>
      </VerticalTicker>
      <HorizontalTicker speed={1.5}>
        <div>Put anything you want</div>
        <img src="/images/as/well.png" />
        <h1>All good</h1>
      </HorizontalTicker>
    </div>
  );
}

Configuration

speed (optional)

Both VerticalTicker and HorizontalTicker take speed props, which is a number of pixels by which elements are scrolled on each animation frame.