<lit-particles>
This webcomponent follows the open-wc recommendation.
Installation
npm i lit-particlesUsage
in index.html
<lit-particles options='{
"maxParticles": 200,
<desired options>
}'></lit-particles>
<script type="module">
import 'lit-particles/lit-particles.js';
</script>NOTE: when using an attribute the value in options should be in proper json format
in lit-elements component
import { html, LitElement } from 'lit-element';
import 'lit-particles/lit-particles.js';
const options = {
maxParticles: 200,
color: ["#FF0000", "#00FF00", "#0000FF"]
}
class ExampleComponent extends LitElement {
render() {
return html`
<lit-particles .options="${options}"></lit-particles>
`;
}
}NOTE: when passing an object directly into the options property a '.' should be appendend to the attribute.
other frameworks
Importing the following should register the custom component.
import 'lit-particles/lit-particles.js;Afterward, you should be able to use it by using the custom tags.
<lit-particles></lit-paritcles>The options can either be handled with the data-binding method of the framework or by using attributes.
For more information about properties and attributes read this.
Configuration
const defaultOptions = {
// The amount of particles {Number}
maxParticles: 150,
// The size of the particles {Number}
size: 2,
// Whether to draw the particles on the canvas {Boolean}
showParticles: true,
// The speed with which the particles move {Number}
speed: 1,
// The color(s) of the particles {Array.<String>, String}
// This can either be a single color, or an array of colors
color: '#000000',
// The minimum distance particles should be from eachother before a line between them is created {Number}
minDistance: 120,
// Whether the particles will be connected with lines
connectParticles: true,
};Local Demo with es-dev-server
npm startTo run a local development server that serves the basic demo located in demo/index.html
Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
npm run lintYou can lint with ESLint and Prettier individually as well
npm run lint:eslintnpm run lint:prettierTo automatically fix many linting errors, run
npm run formatYou can format using ESLint and Prettier individually as well
npm run format:eslintnpm run format:prettier