How to use it with SSR?

[AnthonyLzq]

Hi there, I'm trying to use this package with Remix. It used to work, here an example made with this library, but once I updated to v^2.12.1 it stopped working. Here is a minimal repo with the issue, and here is the project deployed. To summarize, no particles are being rendered on the screen.

For reference, here is the relevant config and styles of my components:

// _index.tsx file
import type { V2_MetaFunction } from "@remix-run/node";
import { useCallback } from "react";
import Particles from "react-tsparticles";
import type { Engine, ISourceOptions } from "tsparticles-engine";
import { loadSlim } from 'tsparticles-slim'

export const meta: V2_MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

const particlesConfig: ISourceOptions = {
  background: {
    color: {
      value: '#1B2327'
    }
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onclick: {
        enable: true,
        mode: 'push'
      },
      resize: true
    },
    modes: {
      push: {
        quantity: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: '#ffffff'
    },
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1
    },
    move: {
      direction: 'none',
      enable: true,
      outModes: {
        default: 'bounce'
      },
      random: false,
      speed: 1,
      straight: false
    },
    number: {
      // density: {
      //   enable: true,
      //   area: 1500
      // },
      value: 150
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: 'circle'
    },
    size: {
      value: { min: 1, max: 5 }
    }
  },
  retina_detect: true
}

export default function Index() {
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadSlim(engine)
  }, [])

  return (
    <main style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <Particles
        init={particlesInit}
        className="particles"
        params={particlesConfig}
        loaded={async () => {
          console.log('hi')
        }}
      />
      <section style={{ padding: '8px' }}>
        <h1>Welcome to Remix</h1>
        <ul>
          <li>
            <a
              target="_blank"
              href="https://remix.run/tutorials/blog"
              rel="noreferrer"
            >
              15m Quickstart Blog Tutorial
            </a>
          </li>
          <li>
            <a
              target="_blank"
              href="https://remix.run/tutorials/jokes"
              rel="noreferrer"
            >
              Deep Dive Jokes App Tutorial
            </a>
          </li>
          <li>
            <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
              Remix Docs
            </a>
          </li>
        </ul>
      </section>
    </main>
  );
}

/* styles */
* {
  margin: 0px;
  color: #fff;
}

.particles {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #1B2327;
  position: fixed;
  box-sizing: border-box;
  overflow: hidden;
  z-index: -1;
}

[matteobruni]

I've found an issue with the component update logic, maybe it was this. I've release 2.12.2 of react-particles (or react-tsparticles, it's the same). Let me know if that fixes your issue.

[matteobruni]

I don’t know anything about remix, please provide a full sample with the issue.

[AnthonyLzq]

I will try to do it, but what I was referring was the particlesConfig object. I think the api has changed and that's why I can not see any link. I just discovered that the links appear if I change it as follows:

// old - not working
const particlesConfig: ISourceOptions = {
  // some other configs
  particles: {
    // .. some other configs
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1
    }
  }
}

// current - working
const particlesConfig: ISourceOptions = {
  // some other configs
  particles: {
    // .. some other configs
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1,
      warp: true // this option does the magic
    }
  }
}

Currently working using SSR using v2.11.0, without the ClientOnly Remix component.

[matteobruni]

The options didn’t change, warped links have also some issues when linking particles near the edges

[AnthonyLzq]

That's kind of weird, before the first not-working config I showed you, I was using the following (v2.9 if I'm not mistaking):

// old - use to work with v2.9
const particlesConfig: ISourceOptions = {
  // some other configs
  particles: {
    // .. some other configs
    line_linked: {
      enable: true,
      opacity: 0.5
    }
  }
}

Where can I find all the options and their descriptions?

[matteobruni]

All the APIs are here: https://particles.js.org/docs/index.html