@gfazioli/mantine-text-animate
Version:
The TextAnimate component allows you to animate text with various effects.
70 lines (67 loc) • 1.96 kB
JavaScript
'use client';
import { createVarsResolver, polymorphicFactory, useProps, useStyles, Box } from '@mantine/core';
import React from 'react';
import { useRotatingText } from './use-rotating-text.mjs';
import classes from './RotatingText.module.css.mjs';
const defaultProps = {
animate: true,
interval: 3e3,
speed: 1,
animation: "slideUp"
};
const varsResolver = createVarsResolver((_, { speed }) => ({
root: {
"--text-animate-rotating-speed": `${0.5 / (speed || 1)}s`
}
}));
const RotatingText = polymorphicFactory((_props) => {
const props = useProps("RotatingText", defaultProps, _props);
const {
values,
animate,
interval,
speed,
onCycle,
animation,
classNames,
style,
styles,
unstyled,
vars,
className,
...others
} = props;
const { currentText, nextText, isTransitioning, onTransitionEnd } = useRotatingText({
values,
animate,
interval,
speed,
onCycle
});
const getStyles = useStyles({
name: "RotatingText",
props,
classes,
className,
style,
classNames,
styles,
unstyled,
vars,
varsResolver
});
return /* @__PURE__ */ React.createElement(Box, { ...getStyles("root"), component: "span", "aria-live": "polite", ...others }, isTransitioning ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { component: "span", ...getStyles("exiting"), "data-rotating-text-animation": animation }, currentText), /* @__PURE__ */ React.createElement(
Box,
{
component: "span",
...getStyles("entering"),
"data-rotating-text-animation": animation,
onAnimationEnd: onTransitionEnd
},
nextText
)) : /* @__PURE__ */ React.createElement(Box, { component: "span", ...getStyles("text") }, currentText));
});
RotatingText.classes = classes;
RotatingText.displayName = "RotatingText";
export { RotatingText };
//# sourceMappingURL=RotatingText.mjs.map