使用 typed.js 和 React 函数组件

Question

typed.js doesn't offer an example for this in the docs, only for class components:

class TypedReactDemo extends React.Component {
  componentDidMount() {
    const options = { ... };
    this.typed = new Typed(this.el, options );
  }

  render() {
    return (
      <span ref={(el) => { this.el = el; }} />
    );
  }
}

Answer 1

import React, { useRef, useEffect } from "react";
import Typed from "typed.js";

const Example = () => {
  const typeTarget = useRef(null);

  useEffect(() => {
    const typed = new Typed(typeTarget.current, {
      strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
      typeSpeed: 40,
    });

    return () => {
      typed.destroy();
    };
  }, []);

  return <span ref={typeTarget} />;
};

export default Example;