Сходу уточню: не только на реакте, но и, к сожалению, на jQuery. Проект Lazy Line Painter, по всей видимости, сегодня скорее мертв, чем жив... был у меня неплохой эскиз, сформированный из svg посредством генератора на страничке проекта; увы, нет уже ни странички, ни генератора. Последняя версия Lazy Line Painter доступна и не требует jQuery, но обратной совместимости у нее опять-таки нет... плюнул, решил не заморачиваться и работать со старым кодом: уже без raphael.js (с чего все начиналось), но еще с jQuery. Итак.
В качестве анимированного фона использован vanta.js: код компонента можно взять с этой странички (ничего критично не поменялось), рассмотреть приложение целиком - в репозитория гитхаба Lazy-Line-Painter-React-App (там, правда, бэкграунд сделан на tsParticles, но какая, по большому счету, разница). Здесь же - что касается Lazy Line Painter v.1.7.0...
Все, в общем, несложно. Для использования в CRA этим двум файлам - jquery.lazylinepainter-1.7.0.js и собственно коду приложения (обзовите как хотите) придадим следующую обертку, не забыв импортировать jQuery:
import jQuery from "jquery";
jQuery(document).ready(function($) {
....
});
Далее:
App.js
import React from "react";
import "./App.css";
import "./jquery.lazylinepainter-1.7.0_modified";
import "./painter";
import WavesComponent from "./components/WavesComponent";
function App() {
return (
<WavesComponent>
<div className="App">
<div id="content_lazy">
<div id="lazy"></div>
</div>
</div>
</WavesComponent>
);
}
export default App;
App.css
.App {
min-height: 30em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content_lazy {
width: 50%;
}
Вроде все... результат перед вами.