@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 785 B
JavaScript
import{jsx as o}from"react/jsx-runtime";import"./OverlayParticles.scss";import{observer as m}from"mobx-react-lite";import{useEffect as a,useRef as u,useState as s}from"react";import{uiState as p}from"../store";import v from"../utils/browser";import{useAutorun as d}from"../utils/mobx";function P(){const[n,l]=s(!1),[e,c]=s(),[t,f]=s(!1),i=u();return d(()=>f(p.overlayPosition==="left"&&v.getEngine()?.name!=="EdgeHTML")),a(()=>{t&&!e&&import("particlesjs").then(r=>{c(r.default)})},[t,e]),a(()=>{if(e&&t){const r=e.init({selector:i.current,maxParticles:50,speed:.4,sizeVariations:4,color:"#0C5AB8",connectParticles:!0});return l(!0),()=>{r.destroy()}}},[e,t]),t?o("div",{children:o("canvas",{className:`overlay-particles__canvas ${n?"-visible":""}`,ref:i})}):null}export default m(P);