@gfazioli/mantine-text-animate/dist/esm/Typewriter/Typewriter.mjs

The TextAnimate component allows you to animate text with various effects.

'use client';
import React from 'react';
import { polymorphicFactory, useProps, useStyles, Box, Stack, Flex, Text } from '@mantine/core';
import { useTypewriter } from './use-typewriter.mjs';
import classes from './Typewriter.module.css.mjs';

const defaultProps = {
  speed: 0.03,
  delay: 2e3,
  loop: true,
  withCursor: true,
  multiline: false,
  cursorChar: "|",
  withBlink: true,
  leftSection: null,
  animate: true
};
const Typewriter = polymorphicFactory((_props, ref) => {
  const props = useProps("TextAnimate", defaultProps, _props);
  const {
    animate,
    value,
    speed,
    delay,
    loop,
    withCursor,
    multiline,
    cursorChar,
    withBlink,
    onTypeEnd,
    onTypeLoop,
    leftSection,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const { text: displayText } = useTypewriter({
    value,
    animate,
    multiline,
    speed,
    delay,
    loop,
    onTypeEnd,
    onTypeLoop
  });
  const getStyles = useStyles({
    name: "Typewriter",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars
  });
  return /* @__PURE__ */ React.createElement(Box, { ref, ...getStyles("root"), "data-text-animate-typewriter-multiline": multiline }, multiline ? /* @__PURE__ */ React.createElement(Stack, { gap: 0 }, Array.isArray(displayText) && displayText.slice(0, -1).map((line, index) => /* @__PURE__ */ React.createElement(Flex, { key: `line-${index}`, align: "center" }, leftSection, /* @__PURE__ */ React.createElement(Text, { ...others }, line))), /* @__PURE__ */ React.createElement(Flex, { align: "center" }, leftSection, /* @__PURE__ */ React.createElement(Text, { span: true, ...others }, Array.isArray(displayText) ? displayText[displayText.length - 1] : ""), withCursor && /* @__PURE__ */ React.createElement(
    Text,
    {
      span: true,
      "data-text-animate-typewriter-with-blink": withBlink,
      ...getStyles("cursor"),
      ...others
    },
    cursorChar
  ))) : /* @__PURE__ */ React.createElement(React.Fragment, null, leftSection, /* @__PURE__ */ React.createElement(Text, { ...others }, displayText), withCursor && /* @__PURE__ */ React.createElement(
    Text,
    {
      span: true,
      "data-text-animate-typewriter-with-blink": withBlink,
      ...getStyles("cursor"),
      ...others
    },
    cursorChar
  )));
});
Typewriter.displayName = "Typewriter";

export { Typewriter };
//# sourceMappingURL=Typewriter.mjs.map