javascript - How to set a particles background on nextjs? - Stack Overflow

admin管理员组

文章数量:1305718

I would like to set a particles background only on one page of my web application. I used the following code:

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";

const particlesOptions = {
    background: {
      color: {
        value: "transparent",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: false,
          mode: "push",
        },
        onHover: {
          enable: false,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    fullScreen: {
      enable: false,
      zIndex: 0
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: false,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: false,
      },
      move: {
        direction: "top",
        enable: true,
        outMode: "out",
        random: false,
        speed: 3,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 30,
      },
      opacity: {
        value: 0.9,
      },
      shape: {
        type: "edge",
      },
      size: {
        random: true,
        value: 3,
      },
    },
  detectRetina: true,
}

const Page = () => {
    return (
        <div className={styles.page}>
          <Particles className={styles.particles} options={particlesOptions} />
        </div>
    );
};

export default Page;

The page has 100vh (styles.page), I have tried to set a className to the Particles ponent like this:

.particles {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
 }

But it doesn't show the particles, the background is red and the particles are set to white. I have also tried to set the Particles ponent this way:

const Page = () => {
    return (
        <>
            <Particles className={styles.particles} options={particlesOptions} />
            <div className={styles.page}>
            </div>
        </>
    );
};

But this still doesn't work. I have also tried to set height and width to 100%. Please, is there a way to make this work?

I would like to set a particles background only on one page of my web application. I used the following code:

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";

const particlesOptions = {
    background: {
      color: {
        value: "transparent",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: false,
          mode: "push",
        },
        onHover: {
          enable: false,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    fullScreen: {
      enable: false,
      zIndex: 0
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: false,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: false,
      },
      move: {
        direction: "top",
        enable: true,
        outMode: "out",
        random: false,
        speed: 3,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 30,
      },
      opacity: {
        value: 0.9,
      },
      shape: {
        type: "edge",
      },
      size: {
        random: true,
        value: 3,
      },
    },
  detectRetina: true,
}

const Page = () => {
    return (
        <div className={styles.page}>
          <Particles className={styles.particles} options={particlesOptions} />
        </div>
    );
};

export default Page;

The page has 100vh (styles.page), I have tried to set a className to the Particles ponent like this:

.particles {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
 }

But it doesn't show the particles, the background is red and the particles are set to white. I have also tried to set the Particles ponent this way:

const Page = () => {
    return (
        <>
            <Particles className={styles.particles} options={particlesOptions} />
            <div className={styles.page}>
            </div>
        </>
    );
};

But this still doesn't work. I have also tried to set height and width to 100%. Please, is there a way to make this work?

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Dec 2, 2024 at 9:54 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Apr 15, 2022 at 2:18 josanbaqjosanbaq 26633 silver badges77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I might be too late but I hope this will help somebody.

I was facing the same problem on Next.js and was able to get it working by following the docs here

Basically, you have to add the main tsparticles package and use an exported function from it called loadFull to load the particles.

For example, this is what it'll look like.

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

const options = {
    //options
};

const Page = () => {
    const particlesInit = async (main: Engine) => {
    // you can initialize the tsParticles instance (main) 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(main);
};

    return (
        <div className={styles.page}>
            <Particles className={styles.particles} init={particlesInit} options={particlesOptions} />
        </div>
    );

};

export default Page;

Disclaimer: The code is referenced from the docs.

Edited: It seems that the documentations have moved to here

本文标签： javascriptHow to set a particles background on nextjsStack Overflow