<pre><code class="typescript"><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-0">Particles</span><span class="hl-1"> = ({ </span><span class="hl-5">options</span><span class="hl-1">, </span><span class="hl-5">style</span><span class="hl-1">, ...</span><span class="hl-5">props</span><span class="hl-1"> }: </span><span class="hl-8">ParticlesProps</span><span class="hl-1">) </span><span class="hl-6">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-9">canvasRef</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1"><</span><span class="hl-8">HTMLCanvasElement</span><span class="hl-1">>(</span><span class="hl-6">null</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-0">useEffect</span><span class="hl-1">(</span><br/><span class="hl-1"> () </span><span class="hl-6">=></span><span class="hl-1"> (</span><span class="hl-5">canvasRef</span><span class="hl-1">.</span><span class="hl-5">current</span><span class="hl-1"> ? </span><span class="hl-0">renderParticles</span><span class="hl-1">(</span><span class="hl-5">canvasRef</span><span class="hl-1">.</span><span class="hl-5">current</span><span class="hl-1">, </span><span class="hl-5">options</span><span class="hl-1">) : </span><span class="hl-6">undefined</span><span class="hl-1">),</span><br/><span class="hl-1"> [</span><span class="hl-5">options</span><span class="hl-1">],</span><br/><span class="hl-1"> );</span><br/><span class="hl-1"> </span><span class="hl-4">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> <</span><span class="hl-5">canvas</span><br/><span class="hl-1"> </span><span class="hl-5">ref</span><span class="hl-1">={</span><span class="hl-5">canvasRef</span><span class="hl-1">}</span><br/><span class="hl-1"> </span><span class="hl-5">style</span><span class="hl-1">={{ </span><span class="hl-10">pointerEvents</span><span class="hl-1">: </span><span class="hl-2">"none"</span><span class="hl-1">, </span><span class="hl-10">position</span><span class="hl-1">: </span><span class="hl-2">"fixed"</span><span class="hl-1">, </span><span class="hl-10">top</span><span class="hl-1">: </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-10">left</span><span class="hl-1">: </span><span class="hl-11">0</span><span class="hl-1">, ...</span><span class="hl-5">style</span><span class="hl-1"> }}</span><br/><span class="hl-1"> {...</span><span class="hl-5">props</span><span class="hl-1">}</span><br/><span class="hl-1"> </span><span class="hl-5">data</span><span class="hl-1">-</span><span class="hl-5">testid</span><span class="hl-1">=</span><span class="hl-2">"particles"</span><br/><span class="hl-1"> /></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span>
0 commit comments