Как использовать Particles Js в React с помощью react-tsparticles.

Particle.js — это отличная библиотека JavaScript для создания двухмерных и трехмерных частиц на вашем сайте.

Но использование Particle.js — непростая задача, поэтому существует новая версия Particles.js, созданная для компонентных фреймворков, таких как React, Vue и Angular, которая переписана на TypeScript и называется TsParticles, и имеет специальный пакет для легкой интеграции в React под названием react-tsparticles.
react-tsparticles — это замечательный пакет для создания частиц в React.js.

Необходимые условия

Создайте новое приложение React с помощью команды npx create-react-app my-app или вы можете продолжить работу с существующим приложением, если оно уже создано.

Теперь у нас будет файл App.js, в моем случае вот он после некоторого редактирования.

import "./styles.css";

export default function App() {

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

Вход в полноэкранный режим Выход из полноэкранного режима

Как использовать react-tsparticles в React.js

Прежде всего, необходимо установить react-tsparticles, а также tsparticles, поскольку react-tsparticles зависит от них.

npm i react-tsparticles

Если появится какая-либо ошибка, связанная с наследием, используйте —force

npm i react-tsparticles --force

Теперь импортируйте Particles из react-tsparticles и { loadFull } из tsparticles.

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>
  );
}

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Теперь мы можем использовать компонент Particles, передавая некоторые реквизиты, такие как id, init, который будет функцией инициализации, options, который будет конфигурацией для частиц, которые мы хотим отобразить, или url для использования опций из удаленного url с json url.
Ссылка на предварительные настройки опций tsparticles

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 вы найдете список различных предустановок, которые вы можете использовать для получения различных частиц.

Читайте это в моем блоге.

PS: Это мой первый пост и я жду ваших предложений и, конечно же, я буду улучшать этот пост, добавляя больше информации.

Оцените статью
Procodings.ru
Добавить комментарий