SVGLayer.tsx 665 B

123456789101112131415161718192021222324252627282930313233
  1. import { useEffect, useRef } from "react";
  2. import type { Trail } from "../animated-trail";
  3. import "./SVGLayer.scss";
  4. type SVGLayerProps = {
  5. trails: Trail[];
  6. };
  7. export const SVGLayer = ({ trails }: SVGLayerProps) => {
  8. const svgRef = useRef<SVGSVGElement | null>(null);
  9. useEffect(() => {
  10. if (svgRef.current) {
  11. for (const trail of trails) {
  12. trail.start(svgRef.current);
  13. }
  14. }
  15. return () => {
  16. for (const trail of trails) {
  17. trail.stop();
  18. }
  19. };
  20. // eslint-disable-next-line react-hooks/exhaustive-deps
  21. }, trails);
  22. return (
  23. <div className="SVGLayer">
  24. <svg ref={svgRef} />
  25. </div>
  26. );
  27. };