S
SolidJS•6d ago
andahendriksen

Have anyone gotten ts particles to work in solid?

https://github.com/tsparticles/solid I've tried implementing the example they give, but it does not work.
GitHub
GitHub - tsparticles/solid: Solid.js tsParticles official component
Solid.js tsParticles official component. Contribute to tsparticles/solid development by creating an account on GitHub.
No description
2 Replies
oke
oke•5d ago
What does not work? Were there any error messages? Maybe let's start with resolving the red underline errors in your code? You probably need to import the appropriate functions 
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";
Seems like the README.md might be a bit outdated
oke
oke•5d ago
If you check the example app they have under the apps/solid folder in the repo, this seems like the new recommended approach https://github.com/tsparticles/solid/blob/main/apps/solid/src/App.tsx 
import configs from "@tsparticles/configs";
import type { Component } from 'solid-js';
import { createSignal, Show } from "solid-js";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";

const App: Component = () => {
  const init = initParticlesEngine(loadFull)
  const [config, setConfig] = createSignal(configs.basic)

  setTimeout(() => setConfig(configs.absorbers), 1000)

  return (
    <Show when={init()}>
      <Particles id="tsparticles" options={config()}/>
    </Show>
  );
};

export default App;
import configs from "@tsparticles/configs";
import type { Component } from 'solid-js';
import { createSignal, Show } from "solid-js";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";

const App: Component = () => {
  const init = initParticlesEngine(loadFull)
  const [config, setConfig] = createSignal(configs.basic)

  setTimeout(() => setConfig(configs.absorbers), 1000)

  return (
    <Show when={init()}>
      <Particles id="tsparticles" options={config()}/>
    </Show>
  );
};

export default App;
GitHub
solid/apps/solid/src/App.tsx at main · tsparticles/solid
Solid.js tsParticles official component. Contribute to tsparticles/solid development by creating an account on GitHub.

Did you find this page helpful?