puruvj / neoconfetti Goto Github PK

I'm new to svelte, try to make an element explode on exit.

How do I use this in on:out?

Hi,

Though the README for @neoconfetti/react reads "Works seamlessly in NextJS/Remix/Gatsby/Redwood and other Server Side Rendering environments!"

Adding the Confetti import to a Server Side Rendered page provides the error:

node_modules/@neoconfetti/react/dist/index.js (211:28) @ Confetti
useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

In most cases it's possible to just add "use client", but in apps that need to also be defining page metadata it becomes impossible to use this library and set things like the page title/opengraph data.

For example,

import { Confetti } from '@neoconfetti/react';
import { Metadata } from "next";

const metadata: Metadata = {
  title: "Happy Page!",
}

function HappyPage() {
  return (
    <div>
      <Confetti/>
    </div>
  )

}

export default HappyPage;
export { metadata };

You're forced to choose between Confetti (client component) and metadata (server component) ☹️

This is with [email protected] and @neoconfetti/[email protected]

Hi Puru,

Nice library and amazing work as usual

I didn't know that I needed this library until I played with the svelte REPL. I don't quite understand how the particles are generated, but reading through the code I see that you limited to a few shapes for particles.

My question, is if I wanted to changed the particle to be one or more images where should I start? Essentially the confettis would be images. I feel that this option will negatively affect performance should the user go a bit too crazy with the images

Thank you for reading,

Currently, it is https://www.npmjs.com/package/svelte-confetti-explosion when it should be https://www.npmjs.com/package/@neoconfetti/svelte:

Add an onComplete property. Vanilla should still support this as well as explode: Promise

I tried to use it with "use client" but didn't work.