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

create dynamic injected styles with react component or hooks

import React, { useRef, useEffect } from 'react';
import { render } from 'react-dom';
import Keyframe from './keyframe';
function usePortal(portal, root) {
    const styleTagRef = useRef(document.createElement('style'));
    const styleTag = styleTagRef.current;
    const portalRef = useRef(null);
    useEffect(() => {
        portalRef.current = render(portal, styleTag);
    }, [portal]);
    useEffect(() => {
        if (root) {
            root.appendChild(styleTag);
        }
        return () => {
            if (root) {
                root.removeChild(styleTag);
            }
        };
    }, [root]);
}
/*
  {
    from: {...}
    "50": {...}
    to: {...}
  },
*/
function useKeyframe(keyframeBlocks = {}, identity = `ReactStyleKeyframe${Math.round(Math.random() * 1000)}`) {
    const blockKeys = Object.keys(keyframeBlocks);
    const keyframeTag = (React.createElement(Keyframe, { identity: identity }, blockKeys.map((keyframeSelector, index) => {
        const value = keyframeBlocks[keyframeSelector];
        return React.createElement(Keyframe.Block, { key: index, selector: keyframeSelector, value: value });
    })));
    usePortal(keyframeTag, document.head);
    return identity;
}
export default useKeyframe;