react-simple-marquee/build/index.js

Marquee build with React and CSS animation

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var generateCSS = function (_a) {
    var time = _a.time, direction = _a.direction;
    return "\n    @keyframes dynamicMarqueeAnimation-left-right {\n      from {\n        transform: translateX(-50%);\n      }\n      to {\n        transform: translateX(0); \n      }\n    }\n\n    @keyframes dynamicMarqueeAnimation-right-left {\n      from {\n        transform: translateX(0);\n      }\n      to {\n        transform: translateX(-50%);\n      }\n    }\n\n    @keyframes dynamicMarqueeAnimation-top-bottom {\n      from {\n        transform: translateY(-50%);\n      }\n      to {\n        transform: translateY(0);\n      }\n    }\n\n    @keyframes dynamicMarqueeAnimation-bottom-top {\n      from {\n        transform: translateY(0);\n      }\n      to {\n        transform: translateY(-50%);\n      }\n    }\n\n    .react-simple-marquee {\n      display: flex;\n      overflow: hidden;\n    }\n\n    .react-simple-marquee__marquee-wrapper {\n      display: flex;\n      align-items: center;\n      flex-direction: " + (direction === "top-bottom" || direction === "bottom-top"
        ? "column"
        : "row") + ";\n      will-change: transform;\n      animation-duration: " + time + "s;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n\n    .react-simple-marquee__marquee-wrapper:hover {\n      animation-play-state: paused;\n    }\n\n    .react-simple-marquee__marquee-wrapper.left-right {\n      animation-name: dynamicMarqueeAnimation-left-right;\n    }\n\n    .react-simple-marquee__marquee-wrapper.right-left {\n      animation-name: dynamicMarqueeAnimation-right-left;\n    }\n\n    .react-simple-marquee__marquee-wrapper.top-bottom {\n      animation-name: dynamicMarqueeAnimation-top-bottom;\n    }\n\n    .react-simple-marquee__marquee-wrapper.bottom-top {\n      animation-name: dynamicMarqueeAnimation-bottom-top;\n    }\n\n    .react-simple-marquee__marquee-elem {\n      display: flex;\n      align-items: center;\n      flex-direction: " + (direction === "top-bottom" || direction === "bottom-top"
        ? "column"
        : "row") + ";\n    }\n  ";
};
var Marquee = function (_a) {
    var _b = _a.speed, speed = _b === void 0 ? 2 : _b, _c = _a.direction, direction = _c === void 0 ? "right-left" : _c, style = _a.style, children = _a.children;
    var marqueeRef = (0, react_1.useRef)(null);
    var isVertical = direction === "top-bottom" || direction === "bottom-top";
    (0, react_1.useEffect)(function () {
        var isVertical = direction === "top-bottom" || direction === "bottom-top";
        var displacement = isVertical
            ? marqueeRef.current.getBoundingClientRect().height
            : marqueeRef.current.getBoundingClientRect().width;
        var dynamicStyle = document.createElement("style");
        dynamicStyle.type = "text/css";
        var time = (displacement / speed) * 0.1;
        if (dynamicStyle) {
            dynamicStyle.innerHTML = generateCSS({ time: time, direction: direction });
        }
        document.querySelector("head").append(dynamicStyle);
        return function () {
            dynamicStyle === null || dynamicStyle === void 0 ? void 0 : dynamicStyle.remove();
        };
    }, []);
    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "react-simple-marquee", style: isVertical ? __assign(__assign({}, style), { height: "auto" }) : __assign({}, style) }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "react-simple-marquee__marquee-wrapper " + direction }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "react-simple-marquee__marquee-elem", ref: marqueeRef }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", __assign({ className: "react-simple-marquee__marquee-elem" }, { children: children }), void 0)] }), void 0) }), void 0));
};
exports.default = Marquee;