Trying to use Typed.js in react

Question

Trying to use Typed.js in react

474 views Asked by LiquidVision At 02 January 2025 at 01:18

I am trying to use Typed.js on my website, and I have been getting many errors I cant find a way to fix them.

I have looked through GitHub, and I have found the exact same problem that someone had I used that code in my document and the errors are still popping up. The errors are always Expression Expected and } expected also, Unexpected token. Did you mean {'}? Here is a picture of the errors too. Here is the errors that are resulting: errors

import "./App.css";
import Typed from "typed.js";
import { useEffect, useRef } from "react";

function HomePage() {
  return (
    <>
      <body>
        <div class="hero">
          <nav>
            <h2 class="logo">JAKEISTHATMAN.</h2>
            <ul>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">About</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="./contact.js">Portfolio</a>
              </li>
            </ul>
            <button type="button">Contact</button>
          </nav>
        </div>
        <div class="container"></div>

        <div class="main-text">
          <h1>
            I'm a <span class="type"></span>
          </h1>
          <p>
            Also I work for <b>@no</b> media team!
          </p>
          <button type="button">Contact</button>
        </div>

        export default function Typed() {
    const TypedElement = useRef(null);

    useEffect(() => {
        if (!TypedElement.current) return;

        const typed = new Typed(TypedElement.current, {
            strings: [
                "string",
                "string2",
                "string3",
            ],
            startDelay: 300,
            typeSpeed: 100,
            backSpeed: 100,
            backDelay: 500,
            loop: true,
        });

        // Destroying
        return () => {
            typed.destroy();
        };
    }, []);
  
   return <span ref={TypedElement}></span>
}

      </body>
    </>
  );
}

export default HomePage;

Original Q&A

There are 1 answers

**bcstryker** · Accepted Answer · 2023-01-16T15:47:30+00:00

First, if the code example above is how your code really is, it won't work because you just have javascript in an html tag all of a sudden. Try wrapping the javascript with curly brackets to let the file know you are typing javascript code now like this:

<div>
  {console.log("this is javascript")}
</div>

Second, it looks like you are trying to define a functional component called Typed. At the very least, it is poor organization to define a functional component inside an html tag like you have done above (if it isn't impossible, not sure, never tried it). You should define the functional component called Typed outside the HomePage function, like so:

import "./App.css";
import Typed from "typed.js";
import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const typed = new Typed(typeTarget.current, {
      strings: ["<i>First</i> sentence.", `use ${args_if_necessary}`],
      typeSpeed: 40,
    });

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

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

function HomePage() {
    
  return (
    <>
      <body>
        <your-other-html />

        <Example args_if_necessary={"something"} />

      </body>
    </>
  );
}

export default HomePage;

TechQA.

Trying to use Typed.js in react

There are 1 answers

Related Questions in HTML

Related Questions in REACTJS

Related Questions in TYPED.JS

Popular Questions

Popular Tags

Trending Questions