DEMO FOLDER: Cannot find module 'react-ascii-text' or its corresponding type declarations.

App.tsx

**import { useAsciiText, alligator } from 'react-ascii-text';**
import { useState } from "react";

export function App() {
  const [text, setText] = useState(["REACT", "ASCII", "TEXT"]);
  const [isPaused, setIsPaused] = useState(false);

  const asciiTextRef = useAsciiText({
    animationCharacters: "▒░█",
    animationCharacterSpacing: 1,
    animationDelay: 2000,
    animationDirection: "down",
    animationInterval: 100,
    animationLoop: true,
    animationSpeed: 30,
    font: alligator,
    isPaused,
    text,
  });

  let updatedText = [];
  const handleChangeText = (event: React.ChangeEvent<HTMLInputElement>) => {
    const text = event.target.value.toUpperCase();
    updatedText = text.split(/[\s,]+/);
  };

  const handleSetText = () => {
    if (updatedText.length === 0) return;
    setText(updatedText);
  };

  return (
    <main className="container bg-inherit mx-2 my-8 flex flex-col">
      <article className="text-s mx-auto text-center my-8">
        <pre className="text-white w-full mx-auto" ref={asciiTextRef} />
      </article>

      <div className="flex flex-row">
        <input
          className="mr-2"
          placeholder="Your text"
          onChange={handleChangeText}
          type="text"
        />
        <button onClick={handleSetText}>Change text</button>
      </div>
      <div className="my-2">
        <button onClick={() => setIsPaused(!isPaused)}>
          {isPaused ? "Play animation" : "Pause `animation"}`
        </button>
      </div>
    </main>
  );
}

package.json

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --force",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "demo": "file:",
    "react": "^18.2.0",
    **"react-ascii-text": "^0.0.4",**
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
}

samuelweckstrom / react-ascii-text

DEMO FOLDER: Cannot find module 'react-ascii-text' or its corresponding type declarations. #8