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

create dynamic injected styles with react component or hooks

import React, { useMemo } from 'react';
import { createCssRules } from './react-css-transform';
const KeyframeBlock = ({ selector, value: styles }) => {
    const css = useMemo(() => {
        return createCssRules(styles)
            .map(({ name, value }) => `${name}:${value};`)
            .join('');
    }, [styles]);
    return (React.createElement(React.Fragment, null, `${selector} { ${css} }`));
};
function Keyframe({ identity, children }) {
    return (React.createElement(React.Fragment, null,
        `@keyframes ${identity} {`,
        children,
        `}`));
}
Keyframe.Block = KeyframeBlock;
export default Keyframe;