This webcomponent follows the open-wc recommendation.
npm i lit-particles
<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
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.
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.
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,
};
npm start
To run a local development server that serves the basic demo located in demo/index.html
To scan the project for linting errors, run
npm run lint
You can lint with ESLint and Prettier individually as well
npm run lint:eslint
npm run lint:prettier
To automatically fix many linting errors, run
npm run format
You can format using ESLint and Prettier individually as well
npm run format:eslint
npm run format:prettier