From 24cf67a54bbd14525e4d33eed88908edc67d4e0b Mon Sep 17 00:00:00 2001 From: Matteo Bruni <176620+matteobruni@users.noreply.github.com> Date: Fri, 29 Dec 2023 01:52:31 +0100 Subject: [PATCH] build: updated docs and fixed some properties --- README.md | 195 +++++++--------------- components/solid/README.md | 207 ++++++++---------------- components/solid/src/IParticlesProps.ts | 2 +- 3 files changed, 130 insertions(+), 274 deletions(-) diff --git a/README.md b/README.md index 7f911d7..a232227 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) -# solid-particles +# @tsparticles/solid -[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) +[![npm](https://img.shields.io/npm/v/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![npm](https://img.shields.io/npm/dm/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) Official [tsParticles](https://github.com/matteobruni/tsparticles) solid component @@ -13,13 +13,13 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) solid compone ## Installation ```shell -npm install solid-particles +npm install @tsparticles/solid ``` or ```shell -yarn add solid-particles +yarn add @tsparticles/solid ``` ## How to use @@ -31,29 +31,32 @@ Examples: _Remote url_ ```javascript -import Particles from "solid-particles"; +import Particles from "@tsparticles/solid"; function App() { - const particlesInit = async main => { - // 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); - }; + const [ init, setInit ] = createSignal(false); + + createEffect(() => { + if (init()) { + return; + } + + initParticlesEngine(async (engine) => { + // 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); + }).then(() => { + setInit(true); + }) + }); return (
- + url="https://foo.bar/particles.json" + />}
); } @@ -62,132 +65,58 @@ function App() { _Options object_ ```javascript -import Particles from "solid-particles"; -import { loadFull } from "tsparticles"; - -class App extends Component { - constructor(props) { - super(props); - - this.particlesInit = this.particlesInit.bind(this); - this.particlesLoaded = this.particlesLoaded.bind(this); - } - - async particlesInit(main) { - console.log(main); +import Particles from "@tsparticles/solid"; - // 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); - } - - particlesLoaded(container) { - console.log(container); - } +function App() { + const [ init, setInit ] = createSignal(false); + + createEffect(() => { + if (init()) { + return; + } + + initParticlesEngine(async (engine) => { + // 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); + }).then(() => { + setInit(true); + }) + }); - render() { - return ( - + {init() && - ); - } + />} + + ); } ``` ### Props -| Prop | Type | Definition | -| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | The id of the element. | -| width | string | The width of the canvas. | -| height | string | The height of the canvas. | -| options | object | The options of the particles instance. | -| url | string | The remote options url, called using an AJAX request | -| style | object | The style of the canvas element. | -| className | string | The class name of the canvas wrapper. | -| canvasClassName | string | the class name of the canvas. | -| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) | -| init | function | This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here | -| loaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | +| Prop | Type | Definition | +|-----------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------| +| id | string | The id of the element. | +| width | string | The width of the canvas. | +| height | string | The height of the canvas. | +| options | object | The options of the particles instance. | +| url | string | The remote options url, called using an AJAX request | +| style | object | The style of the canvas element. | +| className | string | The class name of the canvas wrapper. | +| canvasClassName | string | the class name of the canvas. | +| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) | +| particlesloaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | Find your parameters configuration [here](https://particles.js.org). diff --git a/components/solid/README.md b/components/solid/README.md index 7f911d7..70b714c 100644 --- a/components/solid/README.md +++ b/components/solid/README.md @@ -1,8 +1,8 @@ [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org) -# solid-particles +# @tsparticles/solid -[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) +[![npm](https://img.shields.io/npm/v/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![npm](https://img.shields.io/npm/dm/@tsparticles/solid)](https://www.npmjs.com/package/@tsparticles/solid) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) Official [tsParticles](https://github.com/matteobruni/tsparticles) solid component @@ -13,13 +13,13 @@ Official [tsParticles](https://github.com/matteobruni/tsparticles) solid compone ## Installation ```shell -npm install solid-particles +npm install @tsparticles/solid ``` or ```shell -yarn add solid-particles +yarn add @tsparticles/solid ``` ## How to use @@ -31,29 +31,28 @@ Examples: _Remote url_ ```javascript -import Particles from "solid-particles"; +import Particles from "@tsparticles/solid"; function App() { - const particlesInit = async main => { - // 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); - }; + const [init, setInit] = createSignal(false); + + createEffect(() => { + if (init()) { + return; + } + + initParticlesEngine(async engine => { + // 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); + }).then(() => { + setInit(true); + }); + }); return (
- + {init() && }
); } @@ -62,132 +61,60 @@ function App() { _Options object_ ```javascript -import Particles from "solid-particles"; -import { loadFull } from "tsparticles"; - -class App extends Component { - constructor(props) { - super(props); - - this.particlesInit = this.particlesInit.bind(this); - this.particlesLoaded = this.particlesLoaded.bind(this); - } - - async particlesInit(main) { - console.log(main); - - // 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); - } - - particlesLoaded(container) { - console.log(container); - } - - render() { - return ( - { + if (init()) { + return; + } + + initParticlesEngine(async engine => { + // 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); + }).then(() => { + setInit(true); + }); + }); + + return ( +
+ {init() && ( + - ); - } + }} + /> + )} +
+ ); } ``` ### Props -| Prop | Type | Definition | -| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | The id of the element. | -| width | string | The width of the canvas. | -| height | string | The height of the canvas. | -| options | object | The options of the particles instance. | -| url | string | The remote options url, called using an AJAX request | -| style | object | The style of the canvas element. | -| className | string | The class name of the canvas wrapper. | -| canvasClassName | string | the class name of the canvas. | -| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) | -| init | function | This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here | -| loaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | +| Prop | Type | Definition | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| id | string | The id of the element. | +| width | string | The width of the canvas. | +| height | string | The height of the canvas. | +| options | object | The options of the particles instance. | +| url | string | The remote options url, called using an AJAX request | +| style | object | The style of the canvas element. | +| className | string | The class name of the canvas wrapper. | +| canvasClassName | string | the class name of the canvas. | +| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) | +| particlesloaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here | Find your parameters configuration [here](https://particles.js.org). diff --git a/components/solid/src/IParticlesProps.ts b/components/solid/src/IParticlesProps.ts index 7e1da98..48e183f 100644 --- a/components/solid/src/IParticlesProps.ts +++ b/components/solid/src/IParticlesProps.ts @@ -12,5 +12,5 @@ export interface IParticlesProps { className?: string; canvasClassName?: string; container?: { current: Container }; - loaded?: (container: Container) => Promise; + particlesLoaded?: (container: Container) => Promise; }