import * as React from "react" ; import { Props , State } from "../index" ; import defaultConfig from "./default" ; import { tsParticles } from "tsparticles" ; export default class Particles extends React . Component < Props , State > { state = { style : { position : "absolute" as "absolute" , display : "block" , top : "0" , left : "0" , height : "100%" , width : "100%" } } ; setStateAsync ( state ) { return new Promise ( resolve => { this . setState ( state , resolve ) ; } ) ; } async componentDidMount ( ) { let id ; if ( this . props . id ) { id = "tsparticles-" + this . props . id ; } else { console . error ( "[ERROR] No 'id' prop found in <Particles/> component." ) ; } let jsonConfigFile , particlesConfig ; if ( this . props . config ) { try { jsonConfigFile = await fetch ( this . props . config ) ; particlesConfig = await jsonConfigFile . json ( ) ; } catch ( e ) { console . error ( "[ERROR] Couldn't load assigned config file; loading default." ) ; particlesConfig = defaultConfig ; } await this . setStateAsync ( { configuration : particlesConfig } ) ; } else { particlesConfig = defaultConfig ; } if ( this . props . style ) { await this . setStateAsync ( { style : { ... this . state . style , ... this . props . style } } ) ; } tsParticles . load ( id , particlesConfig ) ; } render ( ) { return ( < div id = { "tsparticles-" + this . props . id } style = { this . state . style } className = { this . props . className ? this . props . className : "" } > < /div>); } }