<pre><code class="typescript"><span class="hl-7">const</span><span class="hl-1"> </span><span class="hl-0">Particles</span><span class="hl-1"> = ({ </span><span class="hl-4">options</span><span class="hl-1">, </span><span class="hl-4">overlay</span><span class="hl-1">, </span><span class="hl-4">fullScreenOverlay</span><span class="hl-1">, ...</span><span class="hl-4">props</span><span class="hl-1"> }: </span><span class="hl-8">ParticlesProps</span><span class="hl-1">) </span><span class="hl-7">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">const</span><span class="hl-1"> </span><span class="hl-11">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-7">null</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-7">const</span><span class="hl-1"> </span><span class="hl-11">fsStyles</span><span class="hl-1"> = </span><span class="hl-4">fullScreenOverlay</span><br/><span class="hl-1"> ? { </span><span class="hl-4">position:</span><span class="hl-1"> </span><span class="hl-2">"fixed"</span><span class="hl-1">, </span><span class="hl-4">top:</span><span class="hl-1"> </span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-4">left:</span><span class="hl-1"> </span><span class="hl-6">0</span><span class="hl-1">, </span><span class="hl-4">width:</span><span class="hl-1"> </span><span class="hl-2">"100vw"</span><span class="hl-1">, </span><span class="hl-4">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-7">const</span><span class="hl-1"> </span><span class="hl-11">resolvedOverlay</span><span class="hl-1"> = </span><span class="hl-4">overlay</span><span class="hl-1"> || </span><span class="hl-4">fullScreenOverlay</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">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-4">resolvedOverlay</span><span class="hl-1"> ? { </span><span class="hl-4">pointerEvents:</span><span class="hl-1"> </span><span class="hl-2">"none"</span><span class="hl-1">, ...</span><span class="hl-4">fsStyles</span><span class="hl-1">, ...</span><span class="hl-4">props</span><span class="hl-1">.</span><span class="hl-4">style</span><span class="hl-1"> } : </span><span class="hl-4">props</span><span class="hl-1">.</span><span class="hl-4">style</span><br/><span class="hl-1"> ) </span><span class="hl-3">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-7">=></span><br/><span class="hl-1"> </span><span class="hl-4">canvasRef</span><span class="hl-1">.</span><span class="hl-4">current</span><br/><span class="hl-1"> ? </span><span class="hl-0">renderParticles</span><span class="hl-1">(</span><span class="hl-4">canvasRef</span><span class="hl-1">.</span><span class="hl-4">current</span><span class="hl-1">, { ...</span><span class="hl-4">options</span><span class="hl-1">, </span><span class="hl-4">overlay:</span><span class="hl-1"> </span><span class="hl-4">resolvedOverlay</span><span class="hl-1"> })</span><br/><span class="hl-1"> : </span><span class="hl-7">undefined</span><span class="hl-1">,</span><br/><span class="hl-1"> [</span><span class="hl-4">options</span><span class="hl-1">, </span><span class="hl-4">resolvedOverlay</span><span class="hl-1">],</span><br/><span class="hl-1"> );</span><br/><span class="hl-1"> </span><span class="hl-3">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-4">canvasRef</span><span class="hl-1">} </span><span class="hl-8">style</span><span class="hl-1">={</span><span class="hl-4">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