react-typing-effect

demo

2023-01-24.12-50-16.mp4

props

export type TypingProps = {
  children: string;
  interval: number;
  existTime: number;
  textStyle?: CSSProperties;
  symbolStyle?: CSSProperties;
  symbol?: React.ReactElement;
};

usage

<Typing
  interval={100}
  existTime={2000}
  textStyle={{
    fontSize: "1.2rem",
    fontWeight: "bold",
    fontStyle: "italic",
  }}
  symbolStyle={{
    borderColor: "red",
  }}
>
  Technology geeks save the world!
</Typing>