Skip to content

update README + types #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+53 −127
Open

update README + types #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 25 additions & 62 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,92 +30,55 @@ Examples:

_Remote url_

```javascript
import Particles from "@tsparticles/solid";

function App() {
const [ init, setInit ] = createSignal(false);

createEffect(() => {
if (init()) {
return;
}
```tsx
import { Show } from "solid-js";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";

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);
})
});
const App = () => {
const [init] = createResource(() => initParticlesEngine(loadFull));

return (
<div class="App">
{init() && <Particles
id="tsparticles"
init={particlesInit}
url="https://foo.bar/particles.json"
/>}
</div>
<Show when={init()}>
<Particles id="tsparticles" url="https://foo.bar/particles.json" />
</Show>
);
}
};
```

_Options object_

```javascript
import Particles from "@tsparticles/solid";
import configs from "@tsparticles/configs";
import { Show } from "solid-js";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";

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);
})
});
const App = () => {
const init = initParticlesEngine(loadFull);

return (
<div class="App">
{init() && <Particles
id="tsparticles"
init={particlesInit}
options={{
background: {
color: "#000",
},
fullScreen: {
enable: true,
},
}}
/>}
</div>
<Show when={init()}>
<Particles id="tsparticles" options={configs.basic} />
</Show>
);
}
};

export default App;
```

### 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) |
| class | string | The class name of the canvas wrapper. |
| canvasClass | string | the class name of the canvas. |
| 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).
Expand Down
2 changes: 1 addition & 1 deletion apps/solid/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import configs from "@tsparticles/configs";
import Particles, { initParticlesEngine } from "@tsparticles/solid";
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)
Expand Down
83 changes: 24 additions & 59 deletions components/solid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,75 +30,41 @@ Examples:

_Remote url_

```javascript
import Particles from "@tsparticles/solid";

function App() {
const [init, setInit] = createSignal(false);

createEffect(() => {
if (init()) {
return;
}
```tsx
import { Show } from "solid-js";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";

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);
});
});
const App = () => {
const [init] = createResource(() => initParticlesEngine(loadFull));

return (
<div class="App">
{init() && <Particles id="tsparticles" init={particlesInit} url="https://foo.bar/particles.json" />}
</div>
<Show when={init()}>
<Particles id="tsparticles" url="https://foo.bar/particles.json" />
</Show>
);
}
};
```

_Options object_

```javascript
import Particles from "@tsparticles/solid";
import configs from "@tsparticles/configs";
import { Show } from "solid-js";
import { loadFull } from "tsparticles";
import Particles, { initParticlesEngine } from "@tsparticles/solid";

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);
});
});
const App = () => {
const init = initParticlesEngine(loadFull);

return (
<div class="App">
{init() && (
<Particles
id="tsparticles"
init={particlesInit}
options={{
background: {
color: "#000",
},
fullScreen: {
enable: true,
},
}}
/>
)}
</div>
<Show when={init()}>
<Particles id="tsparticles" options={configs.basic} />
</Show>
);
}
};

export default App;
```

### Props
Expand All @@ -111,9 +77,8 @@ function App() {
| 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) |
| class | string | The class name of the canvas wrapper. |
| canvasClass | string | the class name of the canvas. |
| 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).
Expand Down
2 changes: 1 addition & 1 deletion components/solid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
"test:ssr": "pnpm run test:client --mode ssr",
"lint": "concurrently \"pnpm:lint:code --fix\" pnpm:lint:types",
"lint:ci": "concurrently pnpm:lint:code pnpm:lint:types",
"lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{js,ts,tsx,jsx}",
"lint:code": "eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{ts,tsx}",
"lint:types": "tsc --noEmit",
"update-deps": "pnpm up -Li",
"prettify": "prettier --write \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"README.md\"",
Expand Down
2 changes: 0 additions & 2 deletions components/solid/src/IParticlesProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@ export interface IParticlesProps {
height?: string;
options?: ISourceOptions;
url?: string;
params?: ISourceOptions;
style?: JSX.CSSProperties;
class?: string;
canvasClass?: string;
container?: { current: Container };
// prettier-ignore
particlesLoaded?: (container: Container) => Promise<void>;
}
4 changes: 2 additions & 2 deletions components/solid/src/Particles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import type { IParticlesProps } from "./IParticlesProps";
* @param (props:IParticlesProps) Particles component properties
*/
const Particles = (props: IParticlesProps): JSX.Element => {
const config = mergeProps({ id: "tsparticles" }, props);
const config = mergeProps({ id: "tsparticles", options: {} }, props);

onMount(() => {
const [container] = createResource(
() => ({
id: config.id,
options: config.params ?? config.options ?? {},
options: config.options,
url: config.url,
}),
data => tsParticles.load(data),
Expand Down
Loading