@glyphflow/react

React component for GlyphFlow - animated text transitions with zero runtime dependencies beyond React.

Install

npm install @glyphflow/core @glyphflow/react

Usage

import { GlyphFlow } from "@glyphflow/react";

function StatusText() {
  const [text, setText] = useState("Loading…");

  return (
    <GlyphFlow
      text={text}
      enter="blur-fade-slide"
      exit="blur-fade-slide"
      splitMode="char"
    />
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | text | string | - | Text to display (required) | | className | string | - | CSS class for container | | style | CSSProperties | - | Inline styles for container | | splitMode | "char" \| "word" \| "line" | "char" | Animation granularity | | enter | Partial<PhaseConfig> \| string | "blur-fade-slide" | Enter animation | | exit | Partial<PhaseConfig> \| string | "blur-fade-slide" | Exit animation | | wrapPadding | number | 8 | Padding for text wrapping | | overlap | boolean | false | Allow enter/exit overlap | | reducedMotion | "instant" \| "skip" \| "ignore" | "instant" | Reduced motion handling | | onEnterStart | () => void | - | Called when enter begins | | onEnterComplete | () => void | - | Called when enter finishes | | onExitStart | () => void | - | Called when exit begins | | onExitComplete | () => void | - | Called when exit finishes |

See the main README for full customisation examples.

License

MIT