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.

8 Replies

oke•3mo 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•3mo 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.

bigmistqke•3mo ago

nice, thanks for the catch. @HollowMatt do u wanna change the README or shall i do it?

HollowMatt•3mo ago

feel free to submit a PR

andahendriksenOP•2mo ago

Sorry didn't see your reply, but thanks for helping! Adding the code as you show still gives me:

Module '"@tsparticles/solid"' has no exported member 'initParticlesEngine'. Did you mean to use 'import initParticlesEngine from "@tsparticles/solid"' instead?

Module '"@tsparticles/solid"' has no exported member 'initParticlesEngine'. Did you mean to use 'import initParticlesEngine from "@tsparticles/solid"' instead?

I just did a "yarn add @tsparticles/solid" and it added v. 3.0.0

"@tsparticles/solid": "^3.0.0",

"@tsparticles/solid": "^3.0.0",

When I implement this code it says "init is not a function" on "<Show when={init()}>"

bigmistqke•2mo ago

sounds like it is still pointing to the wrong tsparticles version restart the dev server is sometimes needed w vite a wait no, mb i m wrong let me check ye i misremembered. the published version is not the same as the version on github. and something is blocking it being published. i am not sure what exactly

andahendriksenOP•2mo ago

Thanks for helping! If it helps I get this error now

bigmistqke•2mo ago

@HollowMatt do you know the signature of what is published right now?

Gaming

Programming

Have anyone gotten ts particles to work in solid?

Did you find this page helpful?