Function TextTypeDemo

src/demo/TextAnimations/TextTypeDemo.jsx:33–325

()

};

const TextTypeDemo = () => {
  const [key, forceRerender] = useForceRerender();
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const {
    texts,
    typingSpeed,
    pauseDuration,
    deletingSpeed,
    showCursor,
    cursorCharacter,
    variableSpeedEnabled,
    variableSpeedMin,
    variableSpeedMax,
    cursorBlinkDuration
  } = props;

  const cursorOptions = [
    { value: '_', label: 'Underscore (_)' },
    { value: '|', label: 'Pipe (|)' },
    { value: '▎', label: 'Block (▎)' },
    { value: '●', label: 'Dot (●)' },
    { value: '█', label: 'Full Block (█)' }
  ];

  const propData = useMemo(
    () => [
      {
        name: 'text',
        type: 'string | string[]',
        default: '-',
        description: 'Text or array of texts to type out'
      },
      {
        name: 'as',
        type: 'ElementType',
        default: 'div',
        description: 'HTML tag to render the component as'
      },
      {
        name: 'typingSpeed',
        type: 'number',
        default: '50',
        description: 'Speed of typing in milliseconds'
      },
      {
        name: 'initialDelay',
        type: 'number',
        default: '0',
        description: 'Initial delay before typing starts'
      },
      {
        name: 'pauseDuration',
        type: 'number',
        default: '2000',
        description: 'Time to wait between typing and deleting'
      },
      {
        name: 'deletingSpeed',