🔧 add eslint configuration

lib/index.d.ts

@@ -9,6 +9,7 @@ interface Props {
     effectInterval?: number;
     effectCount?: number;
     colors?: string[];
+    launchSpeed?: number;
 }
-declare function Confetti({ x, y, particleCount, deg, shapeSize, spreadDeg, effectInterval, effectCount, colors, }: Props): JSX.Element;
+declare function Confetti({ x, y, particleCount, deg, shapeSize, spreadDeg, effectInterval, effectCount, colors, launchSpeed, }: Props): JSX.Element;
 export default Confetti;

lib/js/Particle.d.ts

@@ -25,7 +25,7 @@ declare class Particle {
     swingOffset: number;
     swingSpeed: number;
     swingAmplitude: number;
-    constructor(x: number, y: number, deg: number | undefined, colors: string[], shapes?: readonly ["circle", "square"], shapeSize?: number, spread?: number);
+    constructor(x: number, y: number, deg: number | undefined, colors: string[], shapes?: readonly ["circle", "square"], shapeSize?: number, spread?: number, launchSpeed?: number);
     update(): void;
     drawSquare(ctx: CanvasRenderingContext2D): void;
     drawCircle(ctx: CanvasRenderingContext2D): void;

package.json

@@ -21,8 +21,14 @@
     "@babel/core": "^7.21.3",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-eslint": "^9.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@types/react": "^18.0.28",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
     "react": "^18.2.0",

rollup.config.mjs

@@ -4,6 +4,7 @@ import typescript from 'rollup-plugin-typescript2';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import babel from '@rollup/plugin-babel';
+import eslint from '@rollup/plugin-eslint';
 
 import packageJson from './package.json' assert { type: 'json' };
 
@@ -24,6 +25,9 @@ export default {
     },
   ],
   plugins: [
+    eslint({
+      include: ['src/**/*.ts', 'src/**/*.tsx'],
+    }),
     peerDepsExternal(),
     nodeResolve({ extensions }),
     commonjs(),

src/index.tsx

@@ -15,6 +15,7 @@ interface Props {
   effectInterval?: number;
   effectCount?: number;
   colors?: string[];
+  launchSpeed?: number;
 }
 
 function Confetti({
@@ -27,6 +28,7 @@ function Confetti({
   effectInterval = 3000,
   effectCount = 1,
   colors = ['#ff577f', '#ff884b', '#ffd384', '#fff9b0'],
+  launchSpeed = 1,
 }: Props) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const ctxRef = useRef<CanvasRenderingContext2D>();
@@ -51,33 +53,22 @@ function Confetti({
     ctx.scale(DPR, DPR);
   }, []);
 
-  const createConfetti = useCallback(
-    (options: {
-      x: number;
-      y: number;
-      particleCount: number;
-      deg: number;
-      shapeSize: number;
-      spreadDeg: number;
-      colors: string[];
-      shapes?: readonly ['circle', 'square'];
-    }) => {
-      for (let i = 0; i < options.particleCount; i += 1) {
-        particlesRef.current.push(
-          new Particle(
-            options.x,
-            options.y,
-            options.deg,
-            options.colors,
-            options.shapes,
-            options.shapeSize,
-            options.spreadDeg,
-          ),
-        );
-      }
-    },
-    [],
-  );
+  const createConfetti = useCallback(() => {
+    for (let i = 0; i < particleCount; i += 1) {
+      particlesRef.current.push(
+        new Particle(
+          x,
+          y,
+          deg,
+          colors,
+          ['circle', 'square'],
+          shapeSize,
+          spreadDeg,
+          launchSpeed,
+        ),
+      );
+    }
+  }, [x, y, deg, colors, shapeSize, spreadDeg, launchSpeed, particleCount]);
 
   const render = useCallback(() => {
     if (!ctxRef.current) return;
@@ -105,15 +96,7 @@ function Confetti({
         effectDelta > effectInterval &&
         effectCountRef.current < effectCount
       ) {
-        createConfetti({
-          x,
-          y,
-          particleCount,
-          deg,
-          shapeSize,
-          spreadDeg,
-          colors,
-        });
+        createConfetti();
         effectThen = now - (effectDelta % effectInterval);
         effectCountRef.current += 1;
       }
@@ -137,18 +120,7 @@ function Confetti({
     };
 
     animationFrameRef.current = requestAnimationFrame(frame);
-  }, [
-    x,
-    y,
-    particleCount,
-    deg,
-    effectInterval,
-    shapeSize,
-    effectCount,
-    spreadDeg,
-    colors,
-    createConfetti,
-  ]);
+  }, [effectInterval, effectCount, createConfetti]);
 
   useEffect(() => {
     init();
@@ -163,7 +135,6 @@ function Confetti({
 
   useEffect(() => {
     effectCountRef.current = 0;
-    // render();
   }, [effectCount]);
 
   return <canvas className={styles.canvas} ref={canvasRef} />;

src/js/Particle.ts

@@ -32,6 +32,7 @@ class Particle {
     shapes = ['circle', 'square'] as const,
     shapeSize = 12,
     spread = 30,
+    launchSpeed = 1,
   ) {
     const DPR = window.devicePixelRatio > 1 ? 2 : 1;
     this.x = x * window.innerWidth * DPR;
@@ -58,6 +59,8 @@ class Particle {
     this.swingOffset = randomNumBetween(0, Math.PI * 2);
     this.swingSpeed = Math.random() * 0.05 + 0.01;
     this.swingAmplitude = randomNumBetween(0, 0.4);
+
+    console.log(launchSpeed);
   }
 
   update() {