Cosmetics around react component

Author: mayank1513

examples/nextjs/src/app/layout.tsx

@@ -20,7 +20,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
           {children}
         </Layout>
         <GlobalLoader />
-        <Particles style={{ width: "100vw", height: "100vh" }} options={{ overlay: true }} />
+        <Particles fullScreenOverlay />
       </body>
     </html>
   );

lib/src/react/particles/particles.tsx

@@ -1,8 +1,10 @@
-import { HTMLProps, useEffect, useRef } from "react";
+import { CSSProperties, HTMLProps, useEffect, useRef } from "react";
 import { ParticlesOptions, renderParticles } from "../../simulator";
 
 export interface ParticlesProps extends HTMLProps<HTMLCanvasElement> {
   options?: ParticlesOptions;
+  overlay?: boolean;
+  fullScreenOverlay?: boolean;
 }
 
 /**
@@ -15,18 +17,21 @@ export interface ParticlesProps extends HTMLProps<HTMLCanvasElement> {
  *
  * @source - Source code
  */
-export const Particles = ({ options, style, ...props }: ParticlesProps) => {
+export const Particles = ({ options, overlay, fullScreenOverlay, ...props }: ParticlesProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const fsStyles = fullScreenOverlay
+    ? { position: "fixed", top: 0, left: 0, width: "100vw", height: "100vh" }
+    : {};
+
+  const style = (
+    overlay ? { pointerEvents: "none", ...fsStyles, ...props.style } : props.style
+  ) as CSSProperties;
+
   useEffect(
-    () => (canvasRef.current ? renderParticles(canvasRef.current, options) : undefined),
-    [options],
-  );
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ pointerEvents: "none", position: "fixed", top: 0, left: 0, ...style }}
-      {...props}
-      data-testid="particles"
-    />
+    () =>
+      canvasRef.current ? renderParticles(canvasRef.current, { ...options, overlay }) : undefined,
+    [options, overlay],
   );
+  return <canvas ref={canvasRef} style={style} {...props} data-testid="particles" />;
 };

lib/src/simulator.ts

@@ -47,7 +47,7 @@ const defaultOptions: ParticlesOptions = {
 
 const getInitialData = (maxParticles: number) => {
   const data = [];
-  for (let i = 0; i < maxParticles; i++) data.push(0.0, 0.0, 1.0, 0.0, 0.0);
+  for (let i = 0; i < maxParticles; i++) data.push(0, 0, 1, 0, 0);
   return data;
 };
 
@@ -171,7 +171,7 @@ const simulate = (gl: WebGL2RenderingContext, options = defaultOptions) => {
     gl.bindBuffer(gl.ARRAY_BUFFER, null);
   });
 
-  gl.clearColor(1.0, 0, 0, 1);
+  gl.clearColor(0, 0, 0, 0);
 
   const rgNoiseTexture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, rgNoiseTexture);
@@ -213,12 +213,12 @@ const simulate = (gl: WebGL2RenderingContext, options = defaultOptions) => {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     gl.useProgram(updateProgram);
 
-    setUniform(U_DT, dt / 1000.0);
-    setUniform(U_FORCE_FIELD, 0.0, -0.1);
+    setUniform(U_DT, dt / 1000);
+    setUniform(U_FORCE_FIELD, 0, -0.1);
     setUniform(U_ORIGIN, mouseX, mouseY);
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, rgNoiseTexture);
-    setUniform(U_RANDOM_RG, 0.0);
+    setUniform(U_RANDOM_RG, 0);
 
     gl.bindVertexArray(vertexArrayObjects[readIndex]);
     gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, buffers[writeIndex]);