fix fairidust canvas dimensions using useLayout hook

Author: Stefano Vavassori

content/components/fairydust-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Fairy Dust Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that creates a magical fairy dust effect, generating a trail of sparkling emoji particles that follow the cursor in real time. ✨',
 };
 
 <ComponentCodePreview name='fairydust-cursor' />
@@ -10,7 +10,7 @@ export const metadata = {
 
 ```tsx
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 interface FairyDustCursorProps {
   colors?: string[];
@@ -54,7 +54,27 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
   const particlesRef = useRef<Particle[]>([]);
   const cursorRef = useRef({ x: 0, y: 0 });
   const lastPosRef = useRef({ x: 0, y: 0 });
-  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const [canvasSize, setCanvasSize] = useState({
+    width: element ? element.clientWidth : window.innerWidth,
+    height: element ? element.clientHeight : window.innerHeight,
+  });
+
+  useLayoutEffect(() => {
+    const updateCanvasSize = () => {
+      const newWidth = element ? element.clientWidth : window.innerWidth;
+      const newHeight = element ? element.clientHeight : window.innerHeight;
+  
+      console.log('vavva updateCanvasSize', newWidth, newHeight);
+      setCanvasSize({ width: newWidth, height: newHeight });
+    };
+  
+    updateCanvasSize();
+    window.addEventListener('resize', updateCanvasSize);
+  
+    return () => {
+      window.removeEventListener('resize', updateCanvasSize);
+    };
+  },[element])
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -64,16 +84,8 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     const context = canvas.getContext('2d');
     if (!context) return;
 
-    const updateCanvasSize = () => {
-      const newWidth = element ? targetElement.clientWidth : window.innerWidth;
-      const newHeight = element
-        ? targetElement.clientHeight
-        : window.innerHeight;
-      setCanvasSize({ width: newWidth, height: newHeight });
-    };
-
-    updateCanvasSize();
-    window.addEventListener('resize', updateCanvasSize);
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
 
     // Animation frame setup
     let animationFrameId: number;
@@ -181,7 +193,6 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     animate();
 
     return () => {
-      window.removeEventListener('resize', updateCanvasSize);
       targetElement.removeEventListener('mousemove', handleMouseMove);
       targetElement.removeEventListener('touchmove', handleTouchMove);
       cancelAnimationFrame(animationFrameId);
@@ -195,6 +206,7 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     gravity,
     fadeSpeed,
     initialVelocity,
+    canvasSize,
   ]);
 
   return (

registry/components/cursor/fairydust/FairyDustCursor.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 interface FairyDustCursorProps {
   colors?: string[];
@@ -43,7 +43,27 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
   const particlesRef = useRef<Particle[]>([]);
   const cursorRef = useRef({ x: 0, y: 0 });
   const lastPosRef = useRef({ x: 0, y: 0 });
-  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const [canvasSize, setCanvasSize] = useState({
+    width: element ? element.clientWidth : window.innerWidth,
+    height: element ? element.clientHeight : window.innerHeight,
+  });
+
+  useLayoutEffect(() => {
+    const updateCanvasSize = () => {
+      const newWidth = element ? element.clientWidth : window.innerWidth;
+      const newHeight = element ? element.clientHeight : window.innerHeight;
+  
+      console.log('vavva updateCanvasSize', newWidth, newHeight);
+      setCanvasSize({ width: newWidth, height: newHeight });
+    };
+  
+    updateCanvasSize();
+    window.addEventListener('resize', updateCanvasSize);
+  
+    return () => {
+      window.removeEventListener('resize', updateCanvasSize);
+    };
+  },[element])
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -53,16 +73,8 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     const context = canvas.getContext('2d');
     if (!context) return;
 
-    const updateCanvasSize = () => {
-      const newWidth = element ? targetElement.clientWidth : window.innerWidth;
-      const newHeight = element
-        ? targetElement.clientHeight
-        : window.innerHeight;
-      setCanvasSize({ width: newWidth, height: newHeight });
-    };
-
-    updateCanvasSize();
-    window.addEventListener('resize', updateCanvasSize);
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
 
     // Animation frame setup
     let animationFrameId: number;
@@ -170,7 +182,6 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     animate();
 
     return () => {
-      window.removeEventListener('resize', updateCanvasSize);
       targetElement.removeEventListener('mousemove', handleMouseMove);
       targetElement.removeEventListener('touchmove', handleTouchMove);
       cancelAnimationFrame(animationFrameId);
@@ -184,6 +195,7 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     gravity,
     fadeSpeed,
     initialVelocity,
+    canvasSize,
   ]);
 
   return (