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

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

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

const defaultProps = {
  speed: 1,
  delay: 2e3,
  loop: true,
  withCursor: true,
  multiline: false,
  cursorChar: "|",
  withBlink: true,
  leftSection: null,
  animate: true
};
const Typewriter = polymorphicFactory((_props) => {
  const props = useProps("Typewriter", defaultProps, _props);
  const {
    animate,
    value,
    speed,
    delay,
    loop,
    withCursor,
    multiline,
    cursorChar,
    withBlink,
    onTypeEnd,
    onTypeLoop,
    onCharType,
    pauseAt,
    withSound,
    soundVolume,
    leftSection,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    className,
    ...others
  } = props;
  const { text: displayText } = useTypewriter({
    value,
    animate,
    multiline,
    speed,
    delay,
    loop,
    onTypeEnd,
    onTypeLoop,
    onCharType,
    pauseAt,
    withSound,
    soundVolume
  });
  const getStyles = useStyles({
    name: "Typewriter",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars
  });
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      ...getStyles("root"),
      "data-text-animate-typewriter-multiline": multiline,
      "aria-live": "polite"
    },
    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,
        "aria-hidden": "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,
        "aria-hidden": "true",
        "data-text-animate-typewriter-with-blink": withBlink,
        ...getStyles("cursor"),
        ...others
      },
      cursorChar
    ))
  );
});
Typewriter.classes = classes;
Typewriter.displayName = "Typewriter";

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