Merge pull request #2 from matteobruni/master

replaced particles.js with tsParticles

Author: manutuero

.gitignore

@@ -3,4 +3,5 @@ pkg
 build
 coverage
 node_modules
-storybook-static
+storybook-static
+.idea/

package-lock.json

@@ -145,6 +145,6 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "lodash.merge": "^4.6.1",
-    "particles.js": "^2.0.0"
+    "tsparticles": "^1.12.11"
   }
 }

package.json

@@ -1,6 +1,7 @@
 import merge from 'lodash.merge';
-import React, { PureComponent } from 'react';
-import { getParams } from '../../utils';
+import React, {PureComponent} from 'react';
+import {getParams} from '../../utils';
+import {tsParticles} from 'tsparticles';
 
 interface ParticlesProps {
   /**
@@ -43,11 +44,6 @@ interface ParticlesProps {
   withDefaults?: boolean;
 }
 
-interface CustomWindow extends Window {
-  particlesJS?: any;
-  pJSDom?: Array<any>;
-}
-
 export class Particles extends PureComponent<ParticlesProps> {
   static displayName = 'Particles';
 
@@ -60,38 +56,19 @@ export class Particles extends PureComponent<ParticlesProps> {
   };
 
   componentDidMount() {
-    require('particles.js');
-
-    var w: CustomWindow = window;
-
-    if ('particlesJS' in w) {
-      w.particlesJS(this.props.id, this.getParticles());
-    }
+    tsParticles.load(this.props.id ?? "tsparticles", this.getParticles());
   }
 
   componentDidUpdate(prevProps: ParticlesProps) {
-    var w: CustomWindow = window;
-
-    if (
-      'particlesJS' in w &&
-      prevProps.id !== this.props.id &&
-      prevProps.params !== this.props.params
-    ) {
-      w.particlesJS(this.props.id, this.getParticles());
-    }
+    tsParticles.load(this.props.id ?? "tsparticles", this.getParticles());
   }
 
   componentWillUnmount() {
-    var w: CustomWindow = window;
-
-    if ('pJSDom' in w && w.pJSDom instanceof Array && w.pJSDom.length > 0) {
-      w.pJSDom.forEach(({ pJS }) => pJS && pJS.fn.vendors.destroypJS());
-      w.pJSDom = [];
-    }
+    tsParticles.dom().forEach((container) => container.destroy());
   }
 
   render() {
-    const { className, style, width, height, id } = this.props;
+    const {className, style, width, height, id} = this.props;
 
     return (
       <div

src/components/Particles/Particles.tsx

@@ -1,6 +1,17 @@
 import merge from 'lodash.merge';
+import {RecursivePartial} from "tsparticles/dist/Types/RecursivePartial";
+import {IOptions} from "tsparticles/dist/Interfaces/Options/IOptions";
+import {ShapeType} from "tsparticles/dist/Enums/ShapeType";
+import {MoveDirection} from "tsparticles/dist/Enums/MoveDirection";
+import {OutMode} from "tsparticles/dist/Enums/OutMode";
+import {InteractivityDetect} from "tsparticles/dist/Enums/InteractivityDetect";
+import {HoverMode} from "tsparticles/dist/Enums/Modes/HoverMode";
+import {ClickMode} from "tsparticles/dist/Enums/Modes/ClickMode";
+import {PolygonMaskType} from "tsparticles/dist/Enums/PolygonMaskType";
+import {PolygonMaskInlineArrangement} from "tsparticles/dist/Enums/PolygonMaskInlineArrangement";
+import {PolygonMaskMoveType} from "tsparticles/dist/Enums/PolygonMaskMoveType";
 
-export const getParams = () =>
+export const getParams = (): RecursivePartial<IOptions> =>
   merge(
     {},
     {
@@ -17,7 +28,7 @@ export const getParams = () =>
           value: '#FFF',
         },
         shape: {
-          type: 'circle',
+          type: ShapeType.circle,
           stroke: {
             width: 0,
             color: '#000000',
@@ -67,10 +78,10 @@ export const getParams = () =>
         move: {
           enable: true,
           speed: 3,
-          direction: 'none',
+          direction: MoveDirection.none,
           random: false,
           straight: false,
-          out_mode: 'bounce',
+          out_mode: OutMode.bounce,
           bounce: true,
           attract: {
             enable: false,
@@ -81,15 +92,15 @@ export const getParams = () =>
         array: [],
       },
       interactivity: {
-        detect_on: 'canvas',
+        detect_on: InteractivityDetect.canvas,
         events: {
           onhover: {
             enable: false,
-            mode: 'grab',
+            mode: HoverMode.grab,
           },
           onclick: {
             enable: false,
-            mode: 'repulse',
+            mode: ClickMode.repulse,
           },
           resize: true,
         },
@@ -122,9 +133,9 @@ export const getParams = () =>
       polygon: {
         enable: false,
         scale: 1,
-        type: 'inline',
+        type: PolygonMaskType.inline,
         inline: {
-          arrangement: 'one-per-point',
+          arrangement: PolygonMaskInlineArrangement.onePerPoint,
         },
         draw: {
           enable: false,
@@ -135,7 +146,7 @@ export const getParams = () =>
         },
         move: {
           radius: 10,
-          type: 'path',
+          type: PolygonMaskMoveType.path,
         },
         url: '',
       },