<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">overlay</span><span class="hl-1">, </span><span class="hl-5">fullScreenOverlay</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/><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-9">fsStyles</span><span class="hl-1"> = </span><span class="hl-5">fullScreenOverlay</span><br/><span class="hl-1"> ? { </span><span class="hl-5">position:</span><span class="hl-1"> </span><span class="hl-2">"fixed"</span><span class="hl-1">, </span><span class="hl-5">top:</span><span class="hl-1"> </span><span class="hl-10">0</span><span class="hl-1">, </span><span class="hl-5">left:</span><span class="hl-1"> </span><span class="hl-10">0</span><span class="hl-1">, </span><span class="hl-5">width:</span><span class="hl-1"> </span><span class="hl-2">"100vw"</span><span class="hl-1">, </span><span class="hl-5">height:</span><span class="hl-1"> </span><span class="hl-2">"100vh"</span><span class="hl-1"> }</span><br/><span class="hl-1"> : {};</span><br/><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-9">resolvedOverlay</span><span class="hl-1"> = </span><span class="hl-5">overlay</span><span class="hl-1"> || </span><span class="hl-5">fullScreenOverlay</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-0">style</span><span class="hl-1"> = (</span><br/><span class="hl-1"> </span><span class="hl-5">resolvedOverlay</span><span class="hl-1"> ? { </span><span class="hl-5">pointerEvents:</span><span class="hl-1"> </span><span class="hl-2">"none"</span><span class="hl-1">, ...</span><span class="hl-5">fsStyles</span><span class="hl-1">, ...</span><span class="hl-5">props</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-5">style</span><br/><span class="hl-1"> ) </span><span class="hl-4">as</span><span class="hl-1"> </span><span class="hl-8">CSSProperties</span><span class="hl-1">;</span><br/><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><br/><span class="hl-1"> </span><span class="hl-5">canvasRef</span><span class="hl-1">.</span><span class="hl-5">current</span><br/><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-5">overlay:</span><span class="hl-1"> </span><span class="hl-5">resolvedOverlay</span><span class="hl-1"> })</span><br/><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><span class="hl-5">resolvedOverlay</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><span class="hl-8">canvas</span><span class="hl-1"> </span><span class="hl-8">ref</span><span class="hl-1">={</span><span class="hl-5">canvasRef</span><span class="hl-1">} </span><span class="hl-8">style</span><span class="hl-1">={</span><span class="hl-5">style</span><span class="hl-1">} {...</span><span class="hl-8">props</span><span class="hl-1">} </span><span class="hl-8">data</span><span class="hl-1">-</span><span class="hl-8">testid</span><span class="hl-1">=</span><span class="hl-2">"particles"</span><span class="hl-1"> />;</span><br/><span class="hl-1">}</span>
0 commit comments