react-tsparticles와 함께 React에서 Particles Js를 사용하는 방법.

Particle.js는 웹 사이트에서 2D 및 3D로 보이는 파티클을 만들기 위한 훌륭한 JavaScript 라이브러리입니다.

그러나 Particle.js를 사용하는 것은 쉬운 작업이 아니므로 React, Vue 및 Angular와 같은 구성 요소 기반 프레임워크용으로 생성된 새로운 버전의 Particles.js가 있습니다. 이 버전은 TypeScript로 다시 작성되고 TsParticles라고 하며 쉬운 통합을 위한 특수 패키지가 있습니다. React에서는 react-tsparticles라고 합니다.
react-tsparticles는 React.js에서 파티클을 생성하기 위한 멋진 패키지입니다.

전제 조건

npx create-react-app my-app를 사용하여 새 React 앱을 생성하거나 이미 생성한 경우 기존 앱을 계속 사용할 수 있습니다.

이제 우리는 제 경우에 App.js 파일을 가지게 될 것입니다. 약간의 편집 후입니다.

import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

React.js에서 react-tsparticles를 사용하는 방법

먼저 react-tsparticles와 tsparticles를 설치해야 합니다. react-tsparticles는 이에 따라 다릅니다.
npm i react-tsparticlesnpm i tsparticles
레거시 오류가 나타나면 --force를 사용하십시오.
npm i react-tsparticles --forcenpm i tsparticles --force
이제 react-tsparticles에서 입자를 가져오고 tsparticles에서 { loadFull }을 가져옵니다.

import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

이제 초기화 함수가 될 id, init, 표시하려는 입자의 구성이 될 options 또는 url와 같은 일부 소품을 전달하여 입자 구성 요소를 사용할 수 있습니다. json URL이 있는 원격 URL의 옵션을 사용합니다.

import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {



  return (
    <div className="App">
      <h1>Hello Coders!</h1>

      <Particles id="particles-here" init={anInitFunction} options={
        // an config object
      } />

    </div>
  );
}

아래는 위의 방법에 대한 작업 코드입니다.

import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {
  const particlesInit = async (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };

  return (
    <div className="App">
      <h1>Hello Coders!</h1>

       <Particles
      id="tsparticles"
      init={particlesInit}

      options={{
        "fullScreen": {
            "enable": true,
            "zIndex": 1
        },
        "particles": {
            "number": {
                "value": 10,
                "density": {
                    "enable": false,
                    "value_area": 800
                }
            },
            "color": {
                "value": "#fff"
            },
            "shape": {
                "type": "star",
                "options": {
                    "sides": 5
                }
            },
            "opacity": {
                "value": 0.8,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 1,
                    "opacity_min": 0.1,
                    "sync": false
                }
            },
            "size": {
                "value": 4,
                "random": false,
                "anim": {
                    "enable": false,
                    "speed": 40,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "rotate": {
                "value": 0,
                "random": true,
                "direction": "clockwise",
                "animation": {
                    "enable": true,
                    "speed": 5,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance": 600,
                "color": "#ffffff",
                "opacity": 0.4,
                "width": 2
            },
            "move": {
                "enable": true,
                "speed": 2,
                "direction": "none",
                "random": false,
                "straight": false,
                "out_mode": "out",
                "attract": {
                    "enable": false,
                    "rotateX": 600,
                    "rotateY": 1200
                }
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": ["grab"]
                },
                "onclick": {
                    "enable": false,
                    "mode": "bubble"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 400,
                    "line_linked": {
                        "opacity": 1
                    }
                },
                "bubble": {
                    "distance": 400,
                    "size": 40,
                    "duration": 2,
                    "opacity": 8,
                    "speed": 3
                },
                "repulse": {
                    "distance": 200
                },
                "push": {
                    "particles_nb": 4
                },
                "remove": {
                    "particles_nb": 2
                }
            }
        },
        "retina_detect": true,
        "background": {
            "color": "#111",
            "image": "",
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover"
        }
    }}
    />
    </div>
  );
}

그리고 당신은 이것을 얻을 것이다



이제 옵션을 조작할 수 있으며 아래는 다양한 입자를 얻는 데 사용할 수 있는 다양한 사전 설정 목록의 GitHub 저장소입니다.
tsparticles presets

Read this on my blog.

추신: 이것은 내 첫 번째 게시물이며 귀하의 제안을 찾고 있으며 더 많은 정보로 이 게시물을 개선할 것입니다.