├── .babelrc ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── lock.yml ├── no-response.yml └── stale.yml ├── .gitignore ├── .prettierrc.js ├── .storybook ├── config.js ├── preview-head.html └── webpack.config.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── package-lock.json ├── package.json ├── src ├── components │ └── Particles │ │ ├── Particles.tsx │ │ └── index.tsx ├── index.tsx └── utils │ └── index.tsx ├── stories └── index.stories.tsx └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-typescript", "@babel/preset-react"], 3 | "plugins": [ 4 | "@babel/plugin-proposal-object-rest-spread", 5 | "@babel/plugin-proposal-class-properties", 6 | "@babel/plugin-syntax-dynamic-import" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | // ... 4 | 'react-hooks', 5 | ], 6 | extends: 'react-app', 7 | rules: { 8 | 'no-console': ['error', { allow: ['warn', 'error'] }], 9 | 'no-debugger': 'error', 10 | 'no-var': 'error', 11 | 'react-hooks/rules-of-hooks': 'error', 12 | 'react-hooks/exhaustive-deps': 'warn', 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/lock.yml: -------------------------------------------------------------------------------- 1 | # Configuration for lock-threads - https://github.com/dessant/lock-threads 2 | 3 | # Number of days of inactivity before a closed issue or pull request is locked 4 | daysUntilLock: 180 5 | # Comment to post before locking. Set to `false` to disable 6 | lockComment: > 7 | This issue has been automatically locked since there has not been 8 | any recent activity after it was closed. 9 | If you can still reproduce this issue then please open a new issue and fill out 10 | [the entire issue template](https://github.com/blackboxvision/react-particles/blob/master/ISSUE_TEMPLATE.md) 11 | to ensure that we have enough information to address your issue. Thanks! 12 | # Issues or pull requests with these labels will not be locked 13 | exemptLabels: 14 | - help-wanted 15 | # Limit to only `issues` or `pulls` 16 | only: issues 17 | -------------------------------------------------------------------------------- /.github/no-response.yml: -------------------------------------------------------------------------------- 1 | # Configuration for probot-no-response - https://github.com/probot/no-response 2 | 3 | # Number of days of inactivity before an issue is closed for lack of response 4 | daysUntilClose: 28 5 | 6 | # Label requiring a response 7 | responseRequiredLabel: more-information-needed 8 | 9 | # Comment to post when closing an issue for lack of response. Set to `false` to disable. 10 | closeComment: > 11 | This issue has been automatically closed because there has been no response 12 | to our request for more information from the original author. With only the 13 | information that is currently in the issue, we don't have enough information 14 | to take action. Please reach out if you have or find the answers we need so 15 | that we can investigate further. 16 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Configuration for probot-stale - https://github.com/probot/stale 2 | 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale 4 | daysUntilStale: 365 5 | # Number of days of inactivity before a stale Issue or Pull Request is closed 6 | daysUntilClose: 14 7 | # Issues or Pull Requests with these labels will never be considered stale 8 | exemptLabels: 9 | - regression 10 | - security 11 | - triaged 12 | # Label to use when marking as stale 13 | staleLabel: stale 14 | # Comment to post when marking as stale. Set to `false` to disable 15 | markComment: > 16 | Thanks for your contribution! 17 | 18 | This issue has been automatically marked as stale because it has not had 19 | recent activity. 20 | 21 | If you would like this issue to remain open: 22 | 23 | 1. Verify that you can still reproduce the issue in the latest version of react-particles 24 | 1. Comment that the issue is still reproducible and include: 25 | * What version of react-particles you reproduced the issue on 26 | * What OS and version you reproduced the issue on 27 | * What steps you followed to reproduce the issue 28 | 29 | Issues that are labeled as triaged will not be automatically marked as stale. 30 | # Comment to post when removing the stale label. Set to `false` to disable 31 | unmarkComment: false 32 | # Comment to post when closing a stale Issue or Pull Request. Set to `false` to disable 33 | closeComment: false 34 | # Limit to only `issues` or `pulls` 35 | only: issues 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | pkg 2 | .env 3 | build 4 | coverage 5 | node_modules 6 | storybook-static 7 | .idea/ -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: 'es5', 3 | singleQuote: true, 4 | }; 5 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { withInfo } from '@storybook/addon-info'; 2 | import { addDecorator, addParameters, configure } from '@storybook/react'; 3 | import { themes } from '@storybook/theming'; 4 | 5 | addParameters({ 6 | options: { 7 | name: 'React ParticlesJS', 8 | theme: themes.light, 9 | showAddonPanel: false, 10 | addonPanelInRight: true, 11 | }, 12 | }); 13 | 14 | addDecorator(withInfo({ inline: false, header: false })); 15 | 16 | const req = require.context('../stories', true, /.stories.tsx$/); 17 | const loadStories = () => req.keys().forEach(filename => req(filename)); 18 | 19 | configure(loadStories, module); 20 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 8 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = async ({ config }) => { 2 | config.module.rules.push({ 3 | test: /\.(ts|tsx)$/, 4 | use: [ 5 | { 6 | loader: require.resolve('awesome-typescript-loader'), 7 | }, 8 | { 9 | loader: require.resolve('react-docgen-typescript-loader'), 10 | }, 11 | ], 12 | }); 13 | 14 | config.resolve.extensions.push('.ts', '.tsx'); 15 | 16 | return config; 17 | }; 18 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Particles JS 2 | 3 | 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device. 4 | 1. Install the dependencies: `npm i`. 5 | 1. Run `npm run storybook` to run the stories behing `/stories` folder. 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 BlackBox Vision 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Particles JS [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Freact-particles.svg)](https://badge.fury.io/js/%40blackbox-vision%2Freact-particles) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/blackboxvision/react-particles/badge.svg)](https://snyk.io/test/github/blackboxvision/react-particles) 2 | 3 | 🎉Blazing fast ParticlesJS wrapper for ReactJS. Check out the [demo](https://blackboxvision.github.io/react-particles/). 4 | 5 | ## Install 6 | 7 | You can install this library via NPM or YARN. 8 | 9 | ### NPM 10 | 11 | ```bash 12 | npm i @blackbox-vision/react-particles 13 | ``` 14 | 15 | ### YARN 16 | 17 | ```bash 18 | yarn add @blackbox-vision/react-particles 19 | ``` 20 | 21 | ## Usage 22 | 23 | The usage is really simple: 24 | 25 | ```javascript 26 | // App.js 27 | import React from 'react'; 28 | import ReactDOM from 'react-dom'; 29 | import { Particles } from '@blackbox-vision/react-particles'; 30 | 31 | const ParticlesJs = () => ( 32 | 58 | ); 59 | 60 | ReactDOM.render(, document.getElementById('root')); 61 | ``` 62 | 63 | ## Props 64 | 65 | `Particles` rely on the following props: 66 | 67 | | Properties | Types | Default Value | Description | 68 | | ------------ | -------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | 69 | | id | string | particles-js | Determines wheter to render Particles. | 70 | | params | object | ----- | Determines the configuration for Particles JS. | 71 | | style | object | {} | Determines the styles for the Particles container. | 72 | | width | string | auto | Determines the width for the Particles container. | 73 | | height | string | 100vh | Determines the height for the Particles container. | 74 | | className | string | ----- | Determines a custom className to apply to Particles container. | 75 | | withDefaults | boolean | true | Determines if should merge values from params with lib defaults. | 76 | 77 | ## Issues 78 | 79 | Please, open an [issue](https://github.com/BlackBoxVision/react-particles/issues) following one of the issues templates. We will do our best to fix them. 80 | 81 | ## Contributing 82 | 83 | If you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-particles/blob/master/CONTRIBUTING.md) for more information. 84 | 85 | ## License 86 | 87 | Distributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-particles/blob/master/LICENSE) for more information. 88 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@blackbox-vision/react-particles", 3 | "version": "1.2.0", 4 | "description": "🎉Blazing fast ParticlesJS wrapper for ReactJS", 5 | "publishConfig": { 6 | "registry": "https://registry.npmjs.org/" 7 | }, 8 | "scripts": { 9 | "clean": "rimraf pkg && rimraf storybook-static && rimraf build", 10 | "publish": "pack publish", 11 | "build": "npm run clean && pack build", 12 | "test": "jest --passWithNoTests -- -u", 13 | "start": "npm run storybook", 14 | "storybook": "start-storybook -p 6006", 15 | "build-storybook": "build-storybook", 16 | "deploy-storybook": "storybook-to-ghpages" 17 | }, 18 | "@pika/pack": { 19 | "pipeline": [ 20 | [ 21 | "@pika/plugin-standard-pkg", 22 | { 23 | "exclude": [ 24 | "**/*.md", 25 | "**/*.tests.*", 26 | "**/*.stories.*", 27 | "**/__snapshots/*" 28 | ] 29 | } 30 | ], 31 | [ 32 | "@pika/plugin-build-node", 33 | { 34 | "exclude": [ 35 | "**/*.md", 36 | "**/*.tests.*", 37 | "**/*.stories.*", 38 | "**/__snapshots/*" 39 | ] 40 | } 41 | ], 42 | [ 43 | "@pika/plugin-build-web", 44 | { 45 | "exclude": [ 46 | "**/*.md", 47 | "**/*.tests.*", 48 | "**/*.stories.*", 49 | "**/__snapshots/*" 50 | ] 51 | } 52 | ], 53 | [ 54 | "@pika/plugin-build-types", 55 | { 56 | "exclude": [ 57 | "**/*.md", 58 | "**/*.tests.*", 59 | "**/*.stories.*", 60 | "**/__snapshots/*" 61 | ] 62 | } 63 | ] 64 | ] 65 | }, 66 | "repository": { 67 | "type": "git", 68 | "url": "git+https://github.com/BlackBoxVision/react-particles.git" 69 | }, 70 | "author": "Jonatan E. Salas ", 71 | "license": "MIT", 72 | "bugs": { 73 | "url": "https://github.com/BlackBoxVision/react-particles/issues" 74 | }, 75 | "homepage": "https://github.com/BlackBoxVision/react-particles#readme", 76 | "peerDependencies": { 77 | "react": "^16.4.0" 78 | }, 79 | "devDependencies": { 80 | "@babel/core": "^7.4.0", 81 | "@babel/plugin-proposal-class-properties": "^7.4.0", 82 | "@babel/plugin-proposal-object-rest-spread": "^7.4.0", 83 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 84 | "@babel/preset-react": "^7.0.0", 85 | "@babel/preset-typescript": "^7.3.3", 86 | "@commitlint/cli": "^7.5.2", 87 | "@commitlint/config-conventional": "^7.5.0", 88 | "@material-ui/core": "^3.9.2", 89 | "@material-ui/icons": "^3.0.2", 90 | "@pika/plugin-build-node": "^0.3.14", 91 | "@pika/plugin-build-types": "^0.3.14", 92 | "@pika/plugin-build-web": "^0.3.14", 93 | "@pika/plugin-standard-pkg": "^0.3.14", 94 | "@storybook/addon-actions": "^5.0.3", 95 | "@storybook/addon-info": "^5.0.3", 96 | "@storybook/addon-knobs": "^5.0.3", 97 | "@storybook/addon-links": "^5.0.3", 98 | "@storybook/addon-options": "^5.0.10", 99 | "@storybook/addons": "^5.0.3", 100 | "@storybook/react": "^5.0.3", 101 | "@storybook/storybook-deployer": "^2.8.1", 102 | "@storybook/theming": "^5.0.3", 103 | "@types/lodash.merge": "^4.6.6", 104 | "@types/react": "^16.8.8", 105 | "@types/storybook__react": "^4.0.1", 106 | "awesome-typescript-loader": "^5.2.1", 107 | "babel-eslint": "^10.0.1", 108 | "babel-plugin-typescript-to-proptypes": "^0.17.1", 109 | "dotenv-webpack": "^1.7.0", 110 | "eslint": "^5.15.3", 111 | "eslint-config-react-app": "^3.0.8", 112 | "eslint-import-resolver-lerna": "^1.1.0", 113 | "eslint-plugin-flowtype": "^3.4.2", 114 | "eslint-plugin-import": "^2.16.0", 115 | "eslint-plugin-jsx-a11y": "^6.2.1", 116 | "eslint-plugin-react": "^7.12.4", 117 | "eslint-plugin-react-hooks": "^1.6.0", 118 | "firebase": "^4.0.0", 119 | "husky": "^1.3.1", 120 | "jest": "^24.5.0", 121 | "lint-staged": "^8.1.5", 122 | "prettier": "^1.16.4", 123 | "react": "^16.8.5", 124 | "react-docgen-typescript-loader": "^3.1.0", 125 | "rimraf": "^2.6.3", 126 | "storybook-addon-react-docgen": "^1.2.1", 127 | "ts-loader": "^5.3.3" 128 | }, 129 | "husky": { 130 | "hooks": { 131 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", 132 | "pre-commit": "lint-staged" 133 | } 134 | }, 135 | "lint-staged": { 136 | "*.{js,json,css,md}": [ 137 | "prettier --write", 138 | "git add" 139 | ], 140 | "*.{js,ts,tsx}": [ 141 | "eslint --fix --ext .ts,.tsx,.js", 142 | "git add" 143 | ] 144 | }, 145 | "dependencies": { 146 | "core-js": "^2.6.5", 147 | "lodash.merge": "^4.6.1", 148 | "tsparticles": "^1.12.11" 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/components/Particles/Particles.tsx: -------------------------------------------------------------------------------- 1 | import merge from 'lodash.merge'; 2 | import React, {PureComponent} from 'react'; 3 | import {getParams} from '../../utils'; 4 | import {tsParticles} from 'tsparticles'; 5 | 6 | interface ParticlesProps { 7 | /** 8 | * Determines wheter to render Particles 9 | * 10 | * @default "particles-js" 11 | */ 12 | id?: string; 13 | /** 14 | * Determines the configuration for Particles JS 15 | */ 16 | params: any; 17 | /** 18 | * Determines the styles for the Particles container 19 | * 20 | * @default {} 21 | */ 22 | style?: any; 23 | /** 24 | * Determines the width for the Particles container 25 | * 26 | * @default "auto" 27 | */ 28 | width?: string; 29 | /** 30 | * Determines the height for the Particles container 31 | * 32 | * @default "100vh" 33 | */ 34 | height?: string; 35 | /** 36 | * Determines a custom className to apply to Particles container 37 | */ 38 | className?: string; 39 | /** 40 | * Determines if should merge values from params with lib defaults 41 | * 42 | * @default true 43 | */ 44 | withDefaults?: boolean; 45 | } 46 | 47 | export class Particles extends PureComponent { 48 | static displayName = 'Particles'; 49 | 50 | static defaultProps = { 51 | style: {}, 52 | width: 'auto', 53 | height: '100vh', 54 | id: 'particles-js', 55 | withDefaults: true, 56 | }; 57 | 58 | componentDidMount() { 59 | tsParticles.load(this.props.id ?? "tsparticles", this.getParticles()); 60 | } 61 | 62 | componentDidUpdate(prevProps: ParticlesProps) { 63 | tsParticles.load(this.props.id ?? "tsparticles", this.getParticles()); 64 | } 65 | 66 | componentWillUnmount() { 67 | tsParticles.dom().forEach((container) => container.destroy()); 68 | } 69 | 70 | render() { 71 | const {className, style, width, height, id} = this.props; 72 | 73 | return ( 74 |
83 | ); 84 | } 85 | 86 | getParticles = () => { 87 | if (this.props.withDefaults) { 88 | return merge({}, getParams(), this.props.params); 89 | } else { 90 | return this.props.params; 91 | } 92 | }; 93 | } 94 | 95 | export default Particles; 96 | -------------------------------------------------------------------------------- /src/components/Particles/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './Particles'; -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Particles } from './components/Particles'; 2 | -------------------------------------------------------------------------------- /src/utils/index.tsx: -------------------------------------------------------------------------------- 1 | import merge from 'lodash.merge'; 2 | import {RecursivePartial} from "tsparticles/dist/Types/RecursivePartial"; 3 | import {IOptions} from "tsparticles/dist/Interfaces/Options/IOptions"; 4 | import {ShapeType} from "tsparticles/dist/Enums/ShapeType"; 5 | import {MoveDirection} from "tsparticles/dist/Enums/MoveDirection"; 6 | import {OutMode} from "tsparticles/dist/Enums/OutMode"; 7 | import {InteractivityDetect} from "tsparticles/dist/Enums/InteractivityDetect"; 8 | import {HoverMode} from "tsparticles/dist/Enums/Modes/HoverMode"; 9 | import {ClickMode} from "tsparticles/dist/Enums/Modes/ClickMode"; 10 | import {PolygonMaskType} from "tsparticles/dist/Enums/PolygonMaskType"; 11 | import {PolygonMaskInlineArrangement} from "tsparticles/dist/Enums/PolygonMaskInlineArrangement"; 12 | import {PolygonMaskMoveType} from "tsparticles/dist/Enums/PolygonMaskMoveType"; 13 | 14 | export const getParams = (): RecursivePartial => 15 | merge( 16 | {}, 17 | { 18 | particles: { 19 | number: { 20 | value: 40, 21 | max: -1, 22 | density: { 23 | enable: false, 24 | value_area: 1200, 25 | }, 26 | }, 27 | color: { 28 | value: '#FFF', 29 | }, 30 | shape: { 31 | type: ShapeType.circle, 32 | stroke: { 33 | width: 0, 34 | color: '#000000', 35 | }, 36 | polygon: { 37 | nb_sides: 5, 38 | }, 39 | image: { 40 | src: '', 41 | width: 100, 42 | height: 100, 43 | }, 44 | images: [], 45 | }, 46 | opacity: { 47 | value: 0.5, 48 | random: false, 49 | anim: { 50 | enable: true, 51 | speed: 1, 52 | opacity_min: 0.1, 53 | sync: false, 54 | }, 55 | }, 56 | size: { 57 | value: 1, 58 | random: false, 59 | anim: { 60 | enable: false, 61 | speed: 40, 62 | size_min: 0, 63 | sync: false, 64 | }, 65 | }, 66 | line_linked: { 67 | enable: true, 68 | distance: 150, 69 | color: '#FFF', 70 | opacity: 0.6, 71 | width: 1, 72 | shadow: { 73 | enable: false, 74 | blur: 5, 75 | color: 'lime', 76 | }, 77 | }, 78 | move: { 79 | enable: true, 80 | speed: 3, 81 | direction: MoveDirection.none, 82 | random: false, 83 | straight: false, 84 | out_mode: OutMode.bounce, 85 | bounce: true, 86 | attract: { 87 | enable: false, 88 | rotateX: 3000, 89 | rotateY: 3000, 90 | }, 91 | }, 92 | array: [], 93 | }, 94 | interactivity: { 95 | detect_on: InteractivityDetect.canvas, 96 | events: { 97 | onhover: { 98 | enable: false, 99 | mode: HoverMode.grab, 100 | }, 101 | onclick: { 102 | enable: false, 103 | mode: ClickMode.repulse, 104 | }, 105 | resize: true, 106 | }, 107 | modes: { 108 | grab: { 109 | distance: 180, 110 | line_linked: { 111 | opacity: 0.35, 112 | }, 113 | }, 114 | bubble: { 115 | distance: 200, 116 | size: 80, 117 | duration: 0.4, 118 | }, 119 | repulse: { 120 | distance: 100, 121 | duration: 5, 122 | }, 123 | push: { 124 | particles_nb: 4, 125 | }, 126 | remove: { 127 | particles_nb: 2, 128 | }, 129 | }, 130 | }, 131 | retina_detect: true, 132 | fps_limit: 999, 133 | polygon: { 134 | enable: false, 135 | scale: 1, 136 | type: PolygonMaskType.inline, 137 | inline: { 138 | arrangement: PolygonMaskInlineArrangement.onePerPoint, 139 | }, 140 | draw: { 141 | enable: false, 142 | stroke: { 143 | width: 0.5, 144 | color: 'rgba(255, 255, 255, .1)', 145 | }, 146 | }, 147 | move: { 148 | radius: 10, 149 | type: PolygonMaskMoveType.path, 150 | }, 151 | url: '', 152 | }, 153 | } 154 | ); 155 | -------------------------------------------------------------------------------- /stories/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/react'; 2 | import React from 'react'; 3 | import { Particles } from '../src'; 4 | 5 | storiesOf('Particles', module) 6 | .add('Simple', () => ( 7 | 33 | )) 34 | .add('Bubbles', () => ( 35 | 95 | )) 96 | .add('Snow', () => ( 97 | 139 | )) 140 | .add('Galaxy', () => ( 141 | 260 | )) 261 | .add('Nyan Cat', () => ( 262 | 386 | )) 387 | .add('Shinning', () => ( 388 | 458 | )); 459 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build/lib", 4 | "module": "commonjs", 5 | "target": "es5", 6 | "lib": ["es5", "es6", "es7", "es2017", "dom"], 7 | "sourceMap": true, 8 | "allowJs": false, 9 | "jsx": "react", 10 | "moduleResolution": "node", 11 | "rootDirs": ["src", "stories"], 12 | "baseUrl": "src", 13 | "esModuleInterop": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noImplicitReturns": true, 16 | "noImplicitThis": true, 17 | "noImplicitAny": true, 18 | "strictNullChecks": true, 19 | "suppressImplicitAnyIndexErrors": true, 20 | "noUnusedLocals": true, 21 | "declaration": true, 22 | "allowSyntheticDefaultImports": true, 23 | "experimentalDecorators": true, 24 | "emitDecoratorMetadata": true 25 | }, 26 | "include": ["src/**/*"], 27 | "exclude": ["node_modules", "build"] 28 | } 29 | --------------------------------------------------------------------------------