feat: created inferno component

tsparticles · Jul 15, 2020 · ba2f150 · ba2f150
1 parent a6f8564
commit ba2f150
Show file tree

Hide file tree

Showing 10 changed files with 545 additions and 0 deletions.
diff --git a/components/inferno/.babelrc b/components/inferno/.babelrc
@@ -0,0 +1,16 @@
+{
+  "compact": false,
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "loose": true,
+        "targets": {
+          "browsers": ["ie >= 11", "safari > 10"]
+        }
+      }
+    ],
+    ["@babel/typescript", {"isTSX": true, "allExtensions": true}]
+  ],
+  "plugins": [["babel-plugin-inferno", { "imports": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }]]
+}
diff --git a/components/inferno/.editorconfig b/components/inferno/.editorconfig
@@ -0,0 +1,9 @@
+[*.{js,jsx,ts,tsx,json}]
+indent_style = tab
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/components/inferno/README.md b/components/inferno/README.md
@@ -0,0 +1,146 @@
+[![banner](https://cdn.matteobruni.it/images/particles/banner2.png)](https://particles.matteobruni.it)
+
+# inferno-particles
+
+[![npm](https://img.shields.io/npm/v/inferno-particles)](https://www.npmjs.com/package/inferno-particles) [![npm](https://img.shields.io/npm/dm/inferno-particles)](https://www.npmjs.com/package/inferno-particles)
+
+Official [tsParticles](https://github.com/matteobruni/tsparticles) Inferno component
+
+## Installation
+
+```shell
+npm install inferno-particles
+```
+
+or
+
+```shell
+yarn add inferno-particles
+```
+
+## How to use
+
+### Code
+
+Example:
+
+```javascript
+import Particles from "inferno-particles";
+
+class App extends Component {
+  render() {
+    return (
+      <Particles
+        id="tsparticles"
+        params={{
+          background: {
+            color: {
+              value: "#0d47a1",
+            },
+          },
+          fpsLimit: 60,
+          interactivity: {
+            detectsOn: "canvas",
+            events: {
+              onClick: {
+                enable: true,
+                mode: "push",
+              },
+              onHover: {
+                enable: true,
+                mode: "repulse",
+              },
+              resize: true,
+            },
+            modes: {
+              bubble: {
+                distance: 400,
+                duration: 2,
+                opacity: 0.8,
+                size: 40,
+                speed: 3,
+              },
+              push: {
+                quantity: 4,
+              },
+              repulse: {
+                distance: 200,
+                duration: 0.4,
+              },
+            },
+          },
+          particles: {
+            color: {
+              value: "#ffffff",
+            },
+            links: {
+              color: "#ffffff",
+              distance: 150,
+              enable: true,
+              opacity: 0.5,
+              width: 1,
+            },
+            collisions: {
+              enable: true,
+            },
+            move: {
+              direction: "none",
+              enable: true,
+              outMode: "bounce",
+              random: false,
+              speed: 6,
+              straight: false,
+            },
+            number: {
+              density: {
+                enable: true,
+                value_area: 800,
+              },
+              value: 80,
+            },
+            opacity: {
+              value: 0.5,
+            },
+            shape: {
+              type: "circle",
+            },
+            size: {
+              random: true,
+              value: 5,
+            },
+          },
+          detectRetina: true,
+        }}
+      />
+    );
+  }
+}
+```
+
+### Props
+
+| Prop            | Type   | Definition                                                                                                           |
+| --------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
+| width           | string | The width of the canvas.                                                                                             |
+| height          | string | The height of the canvas.                                                                                            |
+| options         | object | The options of the particles instance.                                                                               |
+| style           | object | The style of the canvas element.                                                                                     |
+| className       | string | The class name of the canvas wrapper.                                                                                |
+| canvasClassName | string | the class name of the canvas.                                                                                        |
+| container       | object | The instance of the [particles container](https://github.com/matteobruni/tsparticles/wiki/Particles-Container-class) |
+
+Find your parameters configuration [here](https://particles.matteobruni.it).
+
+### Errors
+
+If you have typescript errors `tsParticles` uses TypeScript `3.9.6` so try installing at least 3.8 for `import type` syntax.
+
+## Demos
+
+The demo website is [here](https://particles.matteobruni.it)
+
+<https://particles.matteobruni.it>
+
+There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
+
+<https://codepen.io/collection/DPOage>
diff --git a/components/inferno/index.d.ts b/components/inferno/index.d.ts
@@ -0,0 +1,34 @@
+// Type definitions for preact-particles v1.15.0
+// Project: https://github.com/matteobruni/react-tsparticles
+// Definitions by: Matteo Bruni <https://github.com/matteobruni>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference types="inferno" />
+import type { IOptions } from "tsparticles/dist/Options/Interfaces/IOptions";
+import type { RecursivePartial } from "tsparticles/dist/Types/RecursivePartial";
+import { IPolygonMaskOptions } from "tsparticles/dist/Plugins/PolygonMask/PolygonMaskPlugin";
+import { IAbsorberOptions } from "tsparticles/dist/Plugins/Absorbers/AbsorbersPlugin";
+import { IEmitterOptions } from "tsparticles/dist/Plugins/Emitters/EmittersPlugin";
+import { Component, RefObject } from "inferno";
+import { Container } from "tsparticles/dist/Core/Container";
+
+export type IParticlesParams = RecursivePartial<IOptions & IPolygonMaskOptions & IAbsorberOptions & IEmitterOptions>;
+
+export * from "tsparticles/dist/Enums";
+
+export interface ParticlesProps {
+	width?: string;
+	height?: string;
+	params?: IParticlesParams;
+	options?: IParticlesParams;
+	style?: any;
+	className?: string;
+	canvasClassName?: string;
+	container?: RefObject<Container>;
+}
+
+type Particles = Component<ParticlesProps>;
+
+declare const Particles: Particles;
+
+export default Particles;
diff --git a/components/inferno/index.js b/components/inferno/index.js
@@ -0,0 +1,7 @@
+const InfernoParticles = require("./dist/particles");
+
+for (let key in InfernoParticles) {
+	InfernoParticles.default[key] = InfernoParticles[key];
+}
+
+module.exports = InfernoParticles.default;
diff --git a/components/inferno/package.json b/components/inferno/package.json
@@ -0,0 +1,84 @@
+{
+	"name": "inferno-particles",
+	"version": "1.0.0",
+	"description": "tsParticles official Inferno component",
+	"main": "index.js",
+	"scripts": {
+		"build": "webpack -p",
+		"check": "tsc"
+	},
+	"bugs": {
+		"url": "https://github.com/matteobruni/tsparticles/issues"
+	},
+	"repository": {
+		"url": "https://github.com/matteobruni/tsparticles",
+		"directory": "components/preact",
+		"type": "git"
+	},
+	"keywords": [
+		"tsparticles",
+		"particles.js",
+		"particlesjs",
+		"particles",
+		"particle",
+		"canvas",
+		"jsparticles",
+		"xparticles",
+		"particles-js",
+		"particles-bg",
+		"particles-bg-vue",
+		"particles-ts",
+		"particles.ts",
+		"react-particles-js",
+		"react",
+		"reactjs",
+		"vue",
+		"vuejs",
+		"preact",
+		"preactjs",
+		"jquery",
+		"angularjs",
+		"angular",
+		"typescript",
+		"javascript",
+		"animation",
+		"web",
+		"html5",
+		"web-design",
+		"webdesign",
+		"css",
+		"html",
+		"css3",
+		"animated",
+		"background"
+	],
+	"author": "Matteo Bruni <matteo.bruni@me.com> (https://www.matteobruni.it)",
+	"license": "MIT",
+	"homepage": "https://particles.matteobruni.it/",
+	"dependencies": {
+		"tsparticles": "^1.17.0",
+		"lodash": "^4.17.19"
+	},
+	"peerDependencies": {
+		"inferno": "^7.0.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.10.5",
+		"@babel/plugin-proposal-class-properties": "7.10.4",
+		"@babel/preset-env": "7.10.4",
+		"@babel/preset-typescript": "^7.10.4",
+		"babel-loader": "^8.1.0",
+		"babel-plugin-inferno": "^6.1.1",
+		"clean-webpack-plugin": "^3.0.0",
+		"css-loader": "^3.6.0",
+		"html-webpack-plugin": "^4.3.0",
+		"node-sass": "^4.14.1",
+		"sass-loader": "^9.0.2",
+		"source-map-loader": "^1.0.1",
+		"style-loader": "^1.2.1",
+		"typescript": "^3.9.6",
+		"webpack": "4.43.0",
+		"webpack-cli": "^3.3.12",
+		"webpack-dev-server": "3.11.0"
+	}
+}