tsParticles React and Vue packages are changing!

Changing? Why?

Starting from today the official tsParticles React.js and Vue.js (2.x and 3.x) packages have a new name.

Don't worry, the previous packages are still maintained and updated, until tsParticles version 3.x, but that's another story.

So what has changed?

React.js

react-tsparticles becomes react-particles, same version (starting from 2.1.3, the latest version that you should use 👀), you can just remove the ts from the package and you're done.

Vue.js

2.x

particles.vue becomes vue2-particles, one major version down. If you are using the version 3.1.3 (the latest, and I really hope you are using this 👀), you have to downgrade that version to 2.1.3 (so it's the exact version of tsParticles)

particles.vue had a major version change when tsParticles was still in v1 because of a major change.
Since vue2-particles is a fresh package, I decided to keep its version aligned with the main package.

3.x

particles.vue3 becomes vue3-particles, same version (starting from 2.0.3, but I recommend using always the latest version, at the moment is 2.1.3).

Recap

A small recap to be clear in few lines:

react-tsparticles -> react-particles, starting from 2.1.3, no different version numbers

particles.vue -> vue2-particles, starting from 3.0.3/2.0.3, they'll have a different major version, but they share the same code

particles.vue3 -> vue3-particles, starting form 2.0.3, no different version numbers

A migration is really suggested, since the "old" packages could become obsolete in the future.

Another thing...

I've launched the tsParticles official sub reddit here: https://www.reddit.com/r/tsParticles

You can also see a full list of tsParticles official components here

All tsParticles Official Components

Jul 27 '22 Author: CaelanIt

• Angular: ng-particles Repo npm
• Inferno: inferno-particles Repo npm
• jQuery: jquery-particles Repo npm
• Preact: preact-particles Repo npm
• React: react-particles Repo npm / react-tsparticles Repo npm
• Riot: riot-particles Repo npm
• Solid: solid-particles Repo npm
• Svelte: svelte-particles Repo npm
• Vue 2.x: vue2-particles Repo npm / particles.vue Repo npm
• Vue 3.x: vue3-particles Repo npm / particles.vue3 Repo npm
• Web Components: web-particles Repo npm

See Full Post

---

matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

---

Table of Contents

• tsParticles - TypeScript Particles
  • Table of Contents
  • Do you want to use it on your website?
  • Library installation
    • Hosting / CDN
      • jsDelivr
      • cdnjs
      • unpkg
    • npm
    • yarn
    • pnpm
      • Import and require
    • Usage
  • Official components for some of the most used frameworks
    • Angular
      • ng-particles
    • Astro
      • astro-particles
    • Ember.js
      • ember-tsparticles
    • Inferno
      • inferno-particles
    • jQuery
      • jquery-particles
    • Preact
      • preact-particles
    • ReactJS
      • react-particles
    • RiotJS
      • riot-particles
    • SolidJS
      • solid-particles
    • Svelte
      • svelte-particles
    • VueJS 2.x
      • vue2-particles
    • VueJS 3.x
      • vue3-particles
    • Web Components
      • web-particles
    • WordPress
      • wordpress-particles
    • Elementor
  • Presets
    • Big Circles
    • Bubbles
    • Confetti
    • Fire
    • Firefly
    • Fireworks
    • Fountain
    • Links
    • Sea Anemone
    • Snow
    • Stars
    • Triangles
  • Templates and Resources
  • Demo / Generator
  • Video Tutorials
    • Characters as particles
    • Polygon mask
    • Animated stars
    • Nyan cat flying on scrolling stars
    • Snow particles
    • Background Mask particles
  • …

View on GitHub

Comments

[JoelBonetR 🥇]

Is it really necessary to differentiate one from the other?

Didn't check the code yet but you may be fine using just a single js/ts lib and create different usage documentation for different frameworks/libs.

Or is that you mind to provide components directly instead? I'd need to check the details but usually a component is just a function so you should be fine here as well with a single lib to maintain.

[Matteo Bruni]

I preferred with prebuilt components so they're easier to use and the user has to read only few lines of code instead of the library usage code that could be more difficult to comprehend.

Every component is different from others because I try to use every feature that I know that library/framework has, for example in Angular there's a native check of SSR, in React I'm deep checking the options changes, and so on...

This gave me also some liberty on the components' code since I could improve their code without updating the documentation.

And last but not least, I prefer to have everything built in the same repository instead of having developer x or y that creates an "unofficial" component, so I can give support on everything I've made, otherwise I have to explain what was changed and why everything broke. I already tried that way and it was a mess, just because the unofficial component used some different default values.

[JoelBonetR 🥇]

Oh got it! 😁