Tsparticles: Utilization of tsParticles with a React App [Help?]

Created on 29 Mar 2020  路  4Comments  路  Source: matteobruni/tsparticles

The Problem
How does (a novice react developer) use this library with a TypeScript react app? (Created with create-react-app's typescript version)

Solution
Steps to reproduce the behavior:

  1. Install yarn add tsparticles
  2. Add import tsParticles from 'tsparticles'; to the top of the file that you want to have tsParticles (tsParticles should not have type any)
  3. Call tsParticles from react component body to attach it to a jsx-rendered div component

Some documentation for use web apps would be greatly appreciated!

Additional context
My development environment is NextJS/React/TypeScript, would greatly appreciate using this to add an extra "glow" to the UI. NextJS isn't a single-page web app, so globally importing the JS as mentioned in the UI is expensive for an effect in use on only a few pages.

Another dependency I used had a similar TypeScript-lacking-types issue. That plugin, however, also featured documentation for using with React.

Additional context
Add any other context or screenshots about the feature request here.

question

All 4 comments

Hi @adammesa,

I'm currently working on a react-ready version of this library trying to merge into react-particles-js.

The repository is this https://github.com/matteobruni/react-particles-js, a fork of the original one with an open PR.

If you want to see current work, the 1.11.0 update it's not implemented yet, I'll bring it asap.

@matteobruni that looks just like what I need, thank you!

I'm going to sit on it for a while (I have a backlog of other items), but thank you for all your hard work (and super-frequent updates!)

Hi again @adammesa,

I've just released the 1.11.1 version with a little bug fix for images as shape. I've updated the react repositories as well, you can use them as sample. They are working fine now.

Version 3.0 of react-particles-js uses tsParticles

Was this page helpful?
0 / 5 - 0 ratings

Related issues

matteobruni picture matteobruni  路  6Comments

jeffgoh picture jeffgoh  路  4Comments

darekaze picture darekaze  路  3Comments

matteobruni picture matteobruni  路  3Comments

paul300497 picture paul300497  路  5Comments