Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

tsparticles-preset-triangles

Package Overview
Dependencies
8
Maintainers
1
Versions
50
Issues
File Explorer

Advanced tools

tsparticles-preset-triangles

tsParticles triangles preset

    2.0.6latest

Version published
Maintainers
1
Yearly downloads
4,193

Weekly downloads

Changelog

Source

tsParticles 2.0.6

tsParticles 2.0.6 Changelog

Breaking Changes

Starting from version 2.0.0, tsparticles won't be a single package anymore. Its growth makes me think a lot about splitting the project in more packages.

The new structure will be a common engine and lot of packages with single features that can be installed and loaded, so everyone can install only the features they need, and for the lazy ones there are bundles and presets ready to be used.

For example, if you want to stick with the tsparticles library you can still install it, and use the bundle file with the CDN. You can easily set it up when using import or require, since you have to add few lines of code to the v1 configuration.

import { tsParticles } from "tsparticles-engine"; // this is the new common package import { loadFull } from "tsparticles"; // this function loads all the features contained in v1 package (async () => { await loadFull(tsParticles); // this is needed to load all the features and can be done everywhere before using tsParticles.load await tsParticles.load("tsparticles", { /* options */ }); // this must be done after loadFull })();

PRO

  • Smaller output, you can import only the features you need without a lot of unused code.
  • Better performance, since a lot of features are not imported, they are not running reducing general performance. More features, more calculations needed.

CONS

  • All features needs to be installed, which result in a long package.json file, that's why presets will be more important now.
  • Previous code won't work anymore without importing the right packages, this is a needed breaking change.

New Features

  • Added outside and inside values to particles move direction options
  • Added outside and inside values to particles move out modes options

How to migrate from v1 to v2?

Version 1.x is still the latest tag on npm, but the next version has a 2.0.0 version, which is something I need to release to the public to find issues, and receive some feedbacks.

Migration Steps

Vanilla JS / HTML usage

Just change the tsparticles file from tsparticles.min.js to tsparticles.bundle.min.js, if the slim version is used, there's a bundle also there but it's a different package, now called tsparticles-slim.

Modules

  1. Install the package "tsparticles-engine" using the next tag like this: npm install [email protected]
  2. Replace all your "tsparticles" imports to "tsparticles-engine"
  3. Add import { loadFull } from "tsparticles"; in the imports, or its RequireJS version. This requires the new 2.0.x version, you can install it using npm install [email protected]
  4. Call loadFull
  • If using a React/Vue/Angular/Svelte or other kind of component: in particlesInit/init property, passing the same parameter coming from the init function to loadFull
  • If not just call loadFull(tsParticles) before any tsParticles usage

Alternative

Using the bundled version of the tsparticles package is not optimal, it's easier to implement but it could load a lot of unnecessary stuff.

I want to take the following code as an example (it's the core of tsparticles-slim package)

import type { Engine } from "tsparticles-engine"; import { loadAngleUpdater } from "tsparticles-updater-angle"; import { loadBaseMover } from "tsparticles-move-base"; import { loadCircleShape } from "tsparticles-shape-circle"; import { loadColorUpdater } from "tsparticles-updater-color"; import { loadExternalAttractInteraction } from "tsparticles-interaction-external-attract"; import { loadExternalBounceInteraction } from "tsparticles-interaction-external-bounce"; import { loadExternalBubbleInteraction } from "tsparticles-interaction-external-bubble"; import { loadExternalConnectInteraction } from "tsparticles-interaction-external-connect"; import { loadExternalGrabInteraction } from "tsparticles-interaction-external-grab"; import { loadExternalPauseInteraction } from "tsparticles-interaction-external-pause"; import { loadExternalPushInteraction } from "tsparticles-interaction-external-push"; import { loadExternalRemoveInteraction } from "tsparticles-interaction-external-remove"; import { loadExternalRepulseInteraction } from "tsparticles-interaction-external-repulse"; import { loadImageShape } from "tsparticles-shape-image"; import { loadLifeUpdater } from "tsparticles-updater-life"; import { loadLineShape } from "tsparticles-shape-line"; import { loadOpacityUpdater } from "tsparticles-updater-opacity"; import { loadOutModesUpdater } from "tsparticles-updater-out-modes"; import { loadParallaxMover } from "tsparticles-move-parallax"; import { loadParticlesAttractInteraction } from "tsparticles-interaction-particles-attract"; import { loadParticlesCollisionsInteraction } from "tsparticles-interaction-particles-collisions"; import { loadParticlesLinksInteraction } from "tsparticles-interaction-particles-links"; import { loadPolygonShape } from "tsparticles-shape-polygon"; import { loadSizeUpdater } from "tsparticles-updater-size"; import { loadSquareShape } from "tsparticles-shape-square"; import { loadStarShape } from "tsparticles-shape-star"; import { loadStrokeColorUpdater } from "tsparticles-updater-stroke-color"; import { loadTextShape } from "tsparticles-shape-text"; export async function loadSlim(engine: Engine): Promise<void> { await loadBaseMover(engine); await loadParallaxMover(engine); await loadExternalAttractInteraction(engine); await loadExternalBounceInteraction(engine); await loadExternalBubbleInteraction(engine); await loadExternalConnectInteraction(engine); await loadExternalGrabInteraction(engine); await loadExternalPauseInteraction(engine); await loadExternalPushInteraction(engine); await loadExternalRemoveInteraction(engine); await loadExternalRepulseInteraction(engine); await loadParticlesAttractInteraction(engine); await loadParticlesCollisionsInteraction(engine); await loadParticlesLinksInteraction(engine); await loadCircleShape(engine); await loadImageShape(engine); await loadLineShape(engine); await loadPolygonShape(engine); await loadSquareShape(engine); await loadStarShape(engine); await loadTextShape(engine); await loadLifeUpdater(engine); await loadOpacityUpdater(engine); await loadSizeUpdater(engine); await loadAngleUpdater(engine); await loadColorUpdater(engine); await loadStrokeColorUpdater(engine); await loadOutModesUpdater(engine); }

Vanilla JS / HTML Usage

Splitting things can be a long activity using <script> tags, but nothing impossible.

From the example above, every package needs its own <script> tag, and every load function needs to be called using tsParticles as a parameter, then use the tsParticles object as always.

The tsparticles-engine must be always present, if there are no bundles (tsparticles-slim, tsparticles or any bundled preset). Every other package is required only if you want to use that feature.

Let's see an example:

https://codepen.io/matteobruni/pen/zYPEbjx

As you can see, in the JS options there are the needed scripts, and before using tsParticles.load their functions are called to load everything correctly. Every load function is async, so it's a Promise that can be awaited, it's not always necessary (like in this case), but it's recommended.

Modules

In this case importing modules is easier, since every module can be installed easily using npm, yarn or pnpm.

Once installed the required packages, import them and the code used for "Vanilla JS / HTML Usage" works also here.

The module sample can be found here:

https://codesandbox.io/s/immutable-cookies-n2lm9p

Components (React, Vue, Angular, Svelte, ...)

Every component has a init or particlesInit (checkout the documentation until everything has the same attribute), that is the place to load all the components, that function has an engine attribute, which is the tsParticles instance used by the component.

React Sample

https://codesandbox.io/s/optimistic-http-mxz8bg

Vue.js 2.x Sample

https://codesandbox.io/s/eager-wildflower-co03th>

Vue.js 3.x Sample

https://codesandbox.io/s/angry-hellman-xv6ifv

Angular Sample

https://codesandbox.io/s/crazy-villani-nc0nfj>

Readme

Source

banner

tsParticles Triangles Preset

jsDelivr npmjs npmjs

tsParticles preset for creating a particles web created by link lines between them.

Slack Discord Telegram

tsParticles Product Hunt

Sample

demo

How to use it

CDN / Vanilla JS / jQuery

The first step is installing tsParticles following the instructions for vanilla javascript in the main project here

Once installed you need one more script to be included in your page (or you can download that from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.triangles.min.js"></script>

This script MUST be placed after the tsParticles one.

Bundle

A bundled script can also be used, this will include every needed plugin needed by the preset.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.triangles.bundle.min.js"></script>

Usage

Once the scripts are loaded you can set up tsParticles like this:

loadTrianglesPreset(tsParticles); tsParticles.load("tsparticles", { preset: "triangles", });

Customization

Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

tsParticles.load("tsparticles", { particles: { shape: { type: "square", }, }, preset: "triangles", });

Like in the sample above, the circles will be replaced by squares.

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

import Particles from "react-tsparticles"; import type { Engine } from "tsparticles-engine"; import { loadTrianglesPreset } from "tsparticles-preset-triangles"; export class ParticlesContainer extends React.PureComponent<IProps> { // this customizes the component tsParticles installation async customInit(engine: Engine): Promise<void> { // this adds the preset to tsParticles, you can safely use the loadTrianglesPreset(engine); } render() { const options = { preset: "triangles", }; return <Particles options={options} init={this.customInit} />; } }

Vue (2.x and 3.x)

The syntax for Vue.js 2.x and 3.x is the same

<Particles id="tsparticles" :particlesInit="particlesInit" url="http://foo.bar/particles.json" /> async function particlesInit(engine: Engine): Promise<void> { loadTrianglesPreset(engine); }

Angular

<ng-particles [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)" (particlesInit)="particlesInit($event)" ></ng-particles> async function particlesInit(engine: Engine): Promise<void> { await loadTrianglesPreset(engine); }

Svelte

<Particles id="tsparticles" url="http://foo.bar/particles.json" on:particlesInit="{onParticlesInit}" /> let onParticlesInit = (event) => { const main = event.detail; loadTrianglesPreset(main); };

Keywords

FAQs

What is tsparticles-preset-triangles?

tsParticles triangles preset

Is tsparticles-preset-triangles popular?

The npm package tsparticles-preset-triangles receives a total of 73 weekly downloads. As such, tsparticles-preset-triangles popularity was classified as not popular.

Is tsparticles-preset-triangles well maintained?

We found that tsparticles-preset-triangles demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 16 Apr 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc