inferno-particles

npmpackage.info

Gathering detailed insights and metrics for inferno-particles

Other packages similar to inferno-particles

tsparticles

3.8.1

Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

@tsparticles/engine

3.8.1

Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

tsparticles-engine

2.12.0

@tsparticles/basic

3.8.1

Gathering detailed insights and metrics for inferno-particles

How to use

Code

Examples:

Remote url

Options object

1import Particles from "inferno-particles"; 2import { loadFull } from "tsparticles"; 3 4class App extends Component { 5 constructor(props) { 6 super(props); 7 8 this.particlesInit = this.particlesInit.bind(this); 9 this.particlesLoaded = this.particlesLoaded.bind(this); 10 } 11 12 particlesInit(main) { 13 console.log(main); 14 15 // you can initialize the tsParticles instance (main) here, adding custom shapes or presets 16 // this loads the tsparticles package bundle, it's the easiest method for getting everything ready 17 // starting from v2 you can add only the features you need reducing the bundle size 18 loadFull(main); 19 } 20 21 particlesLoaded(container) { 22 console.log(container); 23 } 24 25 render() { 26 return ( 27 <Particles 28 id="tsparticles" 29 init={this.particlesInit} 30 loaded={this.particlesLoaded} 31 options={{ 32 background: { 33 color: { 34 value: "#0d47a1", 35 }, 36 }, 37 fpsLimit: 120, 38 interactivity: { 39 events: { 40 onClick: { 41 enable: true, 42 mode: "push", 43 }, 44 onHover: { 45 enable: true, 46 mode: "repulse", 47 }, 48 resize: true, 49 }, 50 modes: { 51 push: { 52 quantity: 4, 53 }, 54 repulse: { 55 distance: 200, 56 duration: 0.4, 57 }, 58 }, 59 }, 60 particles: { 61 color: { 62 value: "#ffffff", 63 }, 64 links: { 65 color: "#ffffff", 66 distance: 150, 67 enable: true, 68 opacity: 0.5, 69 width: 1, 70 }, 71 collisions: { 72 enable: true, 73 }, 74 move: { 75 direction: "none", 76 enable: true, 77 outMode: "bounce", 78 random: false, 79 speed: 6, 80 straight: false, 81 }, 82 number: { 83 density: { 84 enable: true, 85 area: 800, 86 }, 87 value: 80, 88 }, 89 opacity: { 90 value: 0.5, 91 }, 92 shape: { 93 type: "circle", 94 }, 95 size: { 96 value: { min: 1, max: 5 }, 97 }, 98 }, 99 detectRetina: true, 100 }} 101 /> 102 ); 103 } 104}

Props

Prop	Type	Definition
id	string	The id of the element.
width	string	The width of the canvas.
height	string	The height of the canvas.
options	object	The options of the particles instance.
url	string	The remote options url, called using an AJAX request
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
init	function	This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here
loaded	function	This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here

Prop

Type

Definition

string

The id of the element.

width

string

The width of the canvas.

height

string

The height of the canvas.

options

object

The options of the particles instance.

url

string

The remote options url, called using an AJAX request

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

init

function

This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here

loaded

function

This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here

Find your parameters configuration here.

Other packages similar to inferno-particles

Other packages similar to inferno-particles

Installations

Developer Guide

Yes

CommonJS

18.13.0

lerna/6.4.1/node@v18.13.0+arm64 (darwin)

Score

Pull Requests

13

4,760

420

4,327

Issues

17

445

428

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

inferno-particles

Installation

How to use

Code

Props

Demos

10

10

10

10

8

2

0

0

0

0

0

0

0

3.8

/10