88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
import React, { Component } from "react";
|
|
import { tsParticles } from "tsparticles-engine";
|
|
import equal from "fast-deep-equal/react";
|
|
const defaultId = "tsparticles";
|
|
export default class Particles extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
init: false,
|
|
library: undefined,
|
|
};
|
|
}
|
|
destroy() {
|
|
if (!this.state.library) {
|
|
return;
|
|
}
|
|
this.state.library.destroy();
|
|
this.setState({
|
|
library: undefined,
|
|
});
|
|
}
|
|
shouldComponentUpdate(nextProps) {
|
|
return !equal(nextProps, this.props);
|
|
}
|
|
componentDidUpdate() {
|
|
this.refresh();
|
|
}
|
|
forceUpdate() {
|
|
this.refresh().then(() => {
|
|
super.forceUpdate();
|
|
});
|
|
}
|
|
componentDidMount() {
|
|
(async () => {
|
|
if (this.props.init) {
|
|
await this.props.init(tsParticles);
|
|
}
|
|
this.setState({
|
|
init: true,
|
|
}, async () => {
|
|
await this.loadParticles();
|
|
});
|
|
})();
|
|
}
|
|
componentWillUnmount() {
|
|
this.destroy();
|
|
}
|
|
render() {
|
|
const { width, height, className, canvasClassName, id } = this.props;
|
|
return (React.createElement("div", { className: className, id: id },
|
|
React.createElement("canvas", { className: canvasClassName, style: Object.assign(Object.assign({}, this.props.style), { width,
|
|
height }) })));
|
|
}
|
|
async refresh() {
|
|
this.destroy();
|
|
await this.loadParticles();
|
|
}
|
|
async loadParticles() {
|
|
var _a, _b, _c;
|
|
if (!this.state.init) {
|
|
return;
|
|
}
|
|
const cb = async (container) => {
|
|
if (this.props.container) {
|
|
this.props.container.current = container;
|
|
}
|
|
this.setState({
|
|
library: container,
|
|
});
|
|
if (this.props.loaded) {
|
|
await this.props.loaded(container);
|
|
}
|
|
};
|
|
const id = (_b = (_a = this.props.id) !== null && _a !== void 0 ? _a : Particles.defaultProps.id) !== null && _b !== void 0 ? _b : defaultId, container = this.props.url
|
|
? await tsParticles.loadJSON(id, this.props.url)
|
|
: await tsParticles.load(id, (_c = this.props.params) !== null && _c !== void 0 ? _c : this.props.options);
|
|
await cb(container);
|
|
}
|
|
}
|
|
Particles.defaultProps = {
|
|
width: "100%",
|
|
height: "100%",
|
|
options: {},
|
|
style: {},
|
|
url: undefined,
|
|
id: defaultId,
|
|
};
|