Particles not showing in tsparticles nextjs

Question

I want to add a particle background to my NextJS app using yarn add react-tsparticles. But when I added the tsparticles I can see that it added the canvas but I can't see the particles. Here is the config:-

const ParticlesConfig = {
  autoplay: true,
  fullScreen: {
    enable: true,
    zIndex: 1,
  },
  particles: {
    number: {
      value: 10,
      density: {
        enable: false,
        value_area: 800,
      },
    },
    color: {
      value: '#fff',
    },
    shape: {
      type: 'star',
      options: {
        sides: 5,
      },
    },
    opacity: {
      value: 0.8,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false,
      },
    },
    size: {
      value: 4,
      random: false,
      anim: {
        enable: false,
        speed: 40,
        size_min: 0.1,
        sync: false,
      },
    },
    rotate: {
      value: 0,
      random: true,
      direction: 'clockwise',
      animation: {
        enable: true,
        speed: 5,
        sync: false,
      },
    },
    line_linked: {
      enable: true,
      distance: 600,
      color: '#ffffff',
      opacity: 0.4,
      width: 2,
    },
    move: {
      enable: true,
      speed: 2,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200,
      },
    },
  },
  interactivity: {
    events: {
      onhover: {
        enable: true,
        mode: ['grab'],
      },
      onclick: {
        enable: false,
        mode: 'bubble',
      },
      resize: true,
    },
    modes: {
      grab: {
        distance: 400,
        line_linked: {
          opacity: 1,
        },
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3,
      },
      repulse: {
        distance: 200,
      },
      push: {
        particles_nb: 4,
      },
      remove: {
        particles_nb: 2,
      },
    },
  },
  retina_detect: true,
  background: {
    color: '#111',
    image: '',
    position: '50% 50%',
    repeat: 'no-repeat',
    size: 'cover',
  },
};

export default ParticlesConfig;

Here is the index.js file:-

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import ParticleBackground from '../components/ParticleBackground';

export default function Home() {
  return (
    <div className='home-main'>
      Aanvikshiki
      <ParticleBackground />
    </div>
  );
}

And here is the ParticleBackground file:-

import React from 'react';
import Particles from 'react-tsparticles';
import ParticlesConfig from '../config/particle-config';
import styles from '../styles/Home.module.css';

const ParticleBackground = () => {
  return (
    <div id='particle-background'>
      <Particles
        id='tsparticles'
        particlesLoaded='particlesLoaded'
        particlesInit='particlesInit'
        options={ParticlesConfig}
        height='100vh'
        width='100vw'
      ></Particles>
    </div>
  );
};

export default ParticleBackground;

I have also noticed that even my CSS is not working on any element. The CSS is in global.css file. I don't know what is conflicting. I copied the config from tsparticle's example and then beautified the JSON with no keys. Please help me with this issue.

Answer 1

This will fix your issue. I made few changes in ParticleBackground.js and also install tsparticles using yarn add tsparticles, react-tsparticles is not enough. Here is the code:-

import React from 'react';
import { useCallback } from 'react';
import { loadFull } from 'tsparticles';
import Particles from 'react-tsparticles';
import ParticlesConfig from '../config/particle-config';
import styles from '../styles/Home.module.css';

const ParticleBackground = () => {
  const particlesInit = useCallback(async (engine) => {
    console.log(engine);
    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(async (container) => {
    await console.log(container);
  }, []);
  return (
    <div id='particle-background'>
      <Particles
        id='tsparticles'
        particlesLoaded='particlesLoaded'
        init={particlesInit}
        loaded={particlesLoaded}
        options={ParticlesConfig}
        height='100vh'
        width='100vw'
      ></Particles>
    </div>
  );
};

export default ParticleBackground;

The reason your CSS is also not working was because of tsparticles. Now it will work.