react-jsx-style/dist/cjs/use-keyframe.js

create dynamic injected styles with react component or hooks

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_dom_1 = require("react-dom");
var keyframe_1 = __importDefault(require("./keyframe"));
function usePortal(portal, root) {
    var styleTagRef = react_1.useRef(document.createElement('style'));
    var styleTag = styleTagRef.current;
    var portalRef = react_1.useRef(null);
    react_1.useEffect(function () {
        portalRef.current = react_dom_1.render(portal, styleTag);
    }, [portal]);
    react_1.useEffect(function () {
        if (root) {
            root.appendChild(styleTag);
        }
        return function () {
            if (root) {
                root.removeChild(styleTag);
            }
        };
    }, [root]);
}
/*
  {
    from: {...}
    "50": {...}
    to: {...}
  },
*/
function useKeyframe(keyframeBlocks, identity) {
    if (keyframeBlocks === void 0) { keyframeBlocks = {}; }
    if (identity === void 0) { identity = "ReactStyleKeyframe" + Math.round(Math.random() * 1000); }
    var blockKeys = Object.keys(keyframeBlocks);
    var keyframeTag = (react_1.default.createElement(keyframe_1.default, { identity: identity }, blockKeys.map(function (keyframeSelector, index) {
        var value = keyframeBlocks[keyframeSelector];
        return react_1.default.createElement(keyframe_1.default.Block, { key: index, selector: keyframeSelector, value: value });
    })));
    usePortal(keyframeTag, document.head);
    return identity;
}
exports.default = useKeyframe;