framer-motion-ticker
Version:
A React component that acts like a ticker, or marquee.
69 lines (68 loc) • 2.5 kB
JavaScript
;
exports.__esModule = true;
exports.Ticker = void 0;
var _react = _interopRequireDefault(require("react"));
var _framerMotion = require("framer-motion");
var _uuid = require("uuid");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Ticker = function Ticker(_ref) {
var children = _ref.children,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 10 : _ref$duration;
var tickerRef = _react["default"].useRef(null);
var _React$useState = _react["default"].useState(''),
tickerUUID = _React$useState[0],
setTickerUUID = _React$useState[1];
var _React$useState2 = _react["default"].useState(2),
tickerContentWidth = _React$useState2[0],
setTickerContentWidth = _React$useState2[1];
var _React$useState3 = _react["default"].useState(1),
numDupes = _React$useState3[0],
setNumDupes = _React$useState3[1];
_react["default"].useEffect(function () {
setTickerUUID((0, _uuid.v4)());
}, []);
_react["default"].useEffect(function () {
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["default"].useEffect(function () {
if (tickerRef.current && tickerContentWidth) {
setNumDupes(Math.max(Math.ceil(2 * tickerRef.current.clientWidth / tickerContentWidth), 1));
}
}, [tickerRef.current, tickerContentWidth]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: "FMT__container",
ref: tickerRef
}, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
className: "FMT__container__contents",
initial: false,
animate: {
x: -tickerContentWidth
},
transition: {
ease: 'linear',
duration: duration,
repeat: Infinity
}
}, children.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
id: "children_" + index
}, item);
}), [].concat(Array(numDupes)).map(function (_) {
return children.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index
}, item);
});
})));
};
exports.Ticker = Ticker;