search

catdad / canvas-confetti

🎉 performant confetti animation in the browser
https://catdad.github.io/canvas-confetti/
ISC License
10.2k stars 358 forks source link

can't import in Astro project #220

Closed mvolkmann closed 8 months ago

mvolkmann commented 9 months ago

I installed this with npm install canvas-confetti and I see it in the node_modules directory.

But when I import it with

import confetti from "canvas-confetti";

I get "Could not find a declaration file for module 'canvas-confetti'".

It works fine if I get it with a script tag.

ulitcos commented 9 months ago

@mvolkmann , try to install it additionally @types/canvas-confetti

mvolkmann commented 8 months ago

@ulitcos I had already tried that. It didn't change anything for me.

mvolkmann commented 8 months ago

@ulitcos Here is a minimal example that has the issue. This Astro app just contains one page with a button that when clicked calls the confetti function. https://github.com/mvolkmann/confetti

ulitcos commented 8 months ago

@ulitcos Here is a minimal example that has the issue. This Astro app just contains one page with a button that when clicked calls the confetti function. https://github.com/mvolkmann/confetti

it's 404

mvolkmann commented 8 months ago

So sorry. I had accidentally made that a private repository. It is public now, so you should be able to access it.

On Sun, Dec 24, 2023 at 7:05 PM Ruslan Krokhin @.***> wrote:

@ulitcos https://github.com/ulitcos Here is a minimal example that has the issue. This Astro app just contains one page with a button that when clicked calls the confetti function. https://github.com/mvolkmann/confetti

it's 404

— Reply to this email directly, view it on GitHub https://github.com/catdad/canvas-confetti/issues/220#issuecomment-1868636148, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATLUC5IDLFP74UW2KBYVTYLDGL3AVCNFSM6AAAAABBAGDTI2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGYZTMMJUHA . You are receiving this because you were mentioned.Message ID: @.***>

-- R. Mark Volkmann Object Computing, Inc.

ulitcos commented 8 months ago

Hi, I have no experience with astro, so I can't be sure that my decision is correct. I have cloned your repository and fixed it as follows:

Changed file "index.astro"

---
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <button id="my-btn">Press Me</button>

    <script>
    import "./script.js";
    </script>
  </body>
</html>

And added new file script.js

import confetti from "canvas-confetti";

function handleClick() {
    confetti({
        particleCount: 100,
        spread: 180,
        origin: { y: 1 },
    });
}

const myBtn = document.getElementById("my-btn");
if (myBtn) myBtn.addEventListener("click", handleClick);
mvolkmann commented 8 months ago

Thanks so much! I used your approach and simplified it a bit by doing everything inside index.astro. This works for me:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <button id="my-btn">Press Me</button>

    <script>
      import confetti from "canvas-confetti";

      function handleClick() {
        confetti({
          particleCount: 100,
          spread: 180,
          origin: { y: 1 },
        });
      }

      const myBtn = document.getElementById("my-btn");
      if (myBtn) myBtn.addEventListener("click", handleClick);
    </script>
  </body>
</html>