Различные варианты использования библиотеки JavaScript Particles.js с Next.js

Как насчет добавления анимации на вашу страницу с помощью пакетов npm?

Приветствую вас всех! Сегодня мы создадим проект с Next.js и будем использовать библиотеку npm и внешний скрипт.

Если вы готовы, давайте начнем.

Для создания приложения Next.js:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Если вы используете TypeScript:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescript

→ Next.js — это платформа React, которая дает вам строительные блоки для создания быстрых веб-приложений. Для получения подробной информации посетите страницу Next.js.

Теперь я немного расскажу о Particle.js, который буду использовать. Particles.js — это библиотека JavaScript. Если вы создали проект с помощью JavaScript, вы можете легко его интегрировать. Это отличный визуальный элемент, который вы можете использовать на своих веб-страницах. Он позволяет создавать анимации удобным и анимированным способом.

Мы будем использовать его с React, но вы также можете найти больше примеров для JavaScript.

Приступаем к кодированию.

Сначала создайте каталог как ParticleArea, а затем создайте в нем файл частиц.json. Вы можете использовать любой тип анимации. Вы можете формировать этот файл так, как хотите. Это мой образец файла.

Используйте библиотеку npm react-particles-js

Чтобы использовать Particles.js с React, нам нужно импортировать Particles.js как npm. библиотека.

npm install react-particles-js & yarn add react-particles-js

Затем создайте файл ParticleArea.tsx (&ParticleArea.js). Внутри импорта файла React:

import react from 'react'
import Particles from './Particles.json'
import Particles from 'react-particles-js'

Мы создаем функциональный компонент, это имя ParticleArea.

const ParticleArea = () => {return (<></>)} export deafult ParticleArea

Компонент будет таким в своей простой форме. Давайте наполним его прямо сейчас!

!!!! {/* @ts-ignore */} // because of eslint

Частицы имеют множество реквизитов:

Ширина, высота, параметры, стиль, имя класса, имя класса холста и ссылка на частицы.

Я использовал только className и params.

Для стиля я использовал только className, в файле CSS я сделал все стили. Ты можешь делать все, что захочешь.

Что касается параметров, вы получаете файл JSON в качестве параметров. вместо файла JSON:

params={{"particles": {... JSON file content}}}

Использовать внешний скрипт

Для использования внешнего сценария создайте каталог с именем externalScript в папке src.

Затем создайте файл Particles.tsx.

Подробнее о внешнем скрипте см. на этой странице.

Если вы используете внешний скрипт, импортируйте эту строку в файл ParticlesArea.tsx.

import Particles from '../../../externalScripts/Particles'

И вы можете использовать <Particles className ={} params={}/>

Я предпочитаю библиотеку, которую установил с пакетом npm. Я показал вам, как вы можете быть с внешним скриптом. Я смог довольно хорошо использовать эту библиотеку с пакетом npm. Честно говоря, мне было трудно принять его как пакет CDN и использовать во внешнем скрипте. Я рекомендую установить его через пакет npm.

Спасибо от Bestte!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.