framer-motion-ticker/dist/esm/ticker.js

A React component that acts like a ticker, or marquee.

import React from 'react';
import { motion } from 'framer-motion';
import { v4 as uuidv4 } from 'uuid';
export var Ticker = _ref => {
  var {
    children,
    duration = 10
  } = _ref;
  var tickerRef = React.useRef(null);
  var [tickerUUID, setTickerUUID] = React.useState('');
  var [tickerContentWidth, setTickerContentWidth] = React.useState(2);
  var [numDupes, setNumDupes] = React.useState(1);
  React.useEffect(() => {
    setTickerUUID(uuidv4());
  }, []);
  React.useEffect(() => {
    var contentWidth = 0;
    for (var index = 0; index < children.length; index++) {
      var _document$getElementB;
      var element = (_document$getElementB = document.getElementById('children_' + index)) == null ? void 0 : _document$getElementB.clientWidth;
      if (element) {
        contentWidth += element;
      }
    }
    setTickerContentWidth(contentWidth);
  });
  React.useEffect(() => {
    if (tickerRef.current && tickerContentWidth) {
      setNumDupes(Math.max(Math.ceil(2 * tickerRef.current.clientWidth / tickerContentWidth), 1));
    }
  }, [tickerRef.current, tickerContentWidth]);
  return /*#__PURE__*/React.createElement("div", {
    className: "FMT__container",
    ref: tickerRef
  }, /*#__PURE__*/React.createElement(motion.div, {
    className: "FMT__container__contents",
    initial: false,
    animate: {
      x: -tickerContentWidth
    },
    transition: {
      ease: 'linear',
      duration,
      repeat: Infinity
    }
  }, children.map((item, index) => /*#__PURE__*/React.createElement("div", {
    key: index,
    id: "children_" + index
  }, item)), [...Array(numDupes)].map(_ => children.map((item, index) => /*#__PURE__*/React.createElement("div", {
    key: index
  }, item)))));
};