когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Анимированный preloader на ReactJS. Используем Suspense
Йо-йо! Я активно развиваю инструменты для работы с контентом. Недавно (август 2019) я перенёс часть инструментов на отдельный сайт и с ними вы можете познакомиться на сайте https://tools.xakplant.ru/. И этот сайт написан на react-js и представляет он из себя простое SPA. При переходе по страницам мне захотелось, чтобы появлялся preloader и я его сделал. Что получилось:
Если вы читаете эту статью значит вы не очень разбираетесь с реакте (как и я :D). Сделать preloader на реакте очень просто. Для этого в нём есть Suspense. Частично я уже затрагивал тему Suspens’a в статье про react-router-dom. Начнём же!
Создадим компонент
На вход suspense принимает html, строку или компонент. В моём примере будет компонент. Сначала у нас будет рендериться вот такой setup:
import React, { Component, Suspense, lazy } from 'react';
import Preloader from '../Preloader/Preloader';
export default class Cover extends Component{
render(){
return(
<Preloader/>
);
}
}
Это я делаю чтобы смотреть как ведёт себя мой прелоадер, иначе его просто не увижу из-за быстрой загрузки.
Далее создаю по адресу «../Preloader/» файл Preloader.js. В нём у меня следующая разметка
Теперь перед демонтажем она становится прозрачны (в componentWillUnmount). Для этого мне понадобилось создать this.viewRef с помощью React.createRef(); в конструкторе. Так я нашёл элемент в DOM с которым мне нужно было произвести манипуляции.
Preloader готов!)
Ставим всё на свои места
Возвращаемся в наш файл в котором рендериться компонент «Preloader» и используем suspense
import React, { Component, Suspense, lazy } from 'react';
import Preloader from '../Preloader/Preloader';
// Импортируем основной компонент
const MainArea = lazy(() => import('../MainArea/MainArea'));
export default class Cover extends Component{
render(){
return(
// В fallback передаём preloder
<Suspense fallback={<Preloader/>}>
<MainArea />
</Suspense>
);
}
}
Всё готово!
P.S.
Вы получили гайд по созданию preloader’а, а я создал новый сайт с инструментами для работы с контентом. Кстати в нём есть отличный инструмент «Нормализация текста из КАПСА» думаю почти у каждого была нужда переделать текст из капса в нормальный текст. Теперь у вас есть инструмент который быстро вернёт капсу человеческий вид и при этом сохранить первые буквы предложения заглавными. Переходите по ссылке https://tools.xakplant.ru/caps-normalize
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.