Чтение прогрессных баров, как тот, который вы можете найти в моем блоге в верхней части одиночных сообщений, приятное небольшое дополнение, чтобы дать подробную информацию о том, как далеко считывается читатель на текущем посте. Строка прокрутки на самом деле не значимы в этом отношении; Он включает в себя всю вашу страницу, что означает, что ваш заголовок, комментарии, нижний колонтитул и т. Д. – это часть указания.
Создание панели прогресса для чтения, которая говорит вам, что фактический прогресс только в текущем содержании пост в реакции довольно прост – особенно с крючками, которые делают наш компонент еще меньше.
Компонент для чтенияProgress
Наше ЧтениеProgress
Компонент сделает следующие вещи:
- использовать
Уместите
крючок, который будет отвечать за чтение и установление нашего прогресса чтения - использовать
Useffect
Крючок, который будет нести ответственность за обработку события прокрутки и правильно обновлять наш прогресс-бар на прокрутке - Верните панель прогресса чтения с правильной шириной
Так что давайте погрузимся вправо в реализацию:
const ReadingProgress = ({ target }) => { const [readingProgress, setReadingProgress] = useState(0); return };
Это фундамент для нашего компонента. чтениеProgress
будет использоваться как ширина (в процентах) для нашего прогресса. Единственный опора для нашего компонента – цель
, что будет ссылка на наш DOM-контейнер поста – больше на что через несколько мгновений.
Сначала давайте реализуем наш слушатель, который будет обновлять наш прогресс-бар на событиях прокрутки:
const scrollListener = () => { if (!target.current) { return; } const element = target.current; const totalHeight = element.clientHeight - element.offsetTop; const windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if (windowScrollTop === 0) { return setReadingProgress(0); } if (windowScrollTop > totalHeight) { return setReadingProgress(100); } console.log(windowScrollTop); setReadingProgress((windowScrollTop / totalHeight) * 100); };
Будет размещен в наших ЧтениеProgress компонент.
WindowsCrolltop
пытается кучу разных ценностей, которые исправляют undefined
Значения для некоторых браузеров (например, Safari).
С этой реализацией есть одна проблема: 100% прогресс чтения достигается только в том случае, если мы прокручиваем прошлое наша цель. Это довольно вряд ли будет правдой (за исключением того, что вы прокрутите одну линию после того, как закончили читать одну строку, которая сделала бы вас действительно странно) – Поэтому нам нужно немного корректировать, как рассчитывается наш прогресс чтения:
const totalHeight = element.clientHeight - element.offsetTop - window.innerHeight;
Это должно уступать более точным результатом с точки зрения того, когда бар должен отображаться завершен.
Далее мы поставим наш слушатель в Useffect
Крюк, который делает весь наш компонент выглядеть так:
const ReadingProgress = ({ target }) => { const [readingProgress, setReadingProgress] = useState(0); const scrollListener = () => { if (!target.current) { return; } const element = target.current; const totalHeight = element.clientHeight - element.offsetTop - (window.innerHeight); const windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if (windowScrollTop === 0) { return setReadingProgress(0); } if (windowScrollTop > totalHeight) { return setReadingProgress(100); } setReadingProgress((windowScrollTop / totalHeight) * 100); }; useEffect(() => { window.addEventListener("scroll", scrollListener); return () => window.removeEventListener("scroll", scrollListener); }); return ; };
Возвращенная функция из наших Useffect
Крючок в основном, в основном, что происходит, когда компонент не размонтируется (см. Эффекты с очисткой в документах).
Последнее, но не в последнюю очередь, нам нужно где-то использовать наш компонент. На данный момент нам нужно будет создать ref на нашем целевом контейнере и просто передать это нашему ЧтениеProgress
компонент:
function App() { const target = React.createRef(); return ( <> post content); }
Смотрите Документы Для получения дополнительной информации о Createref.
Теперь ваш индикатор проведения чтения должен отлично работать отлично – за исключением того, что вы не видите это, потому что у него нет высоты. Исправьте это, добавив некоторые CSS:
.reading-progress-bar { position: sticky; height: 5px; top: 0; background-color: #ff0000; }
Сделанный! Теперь ваши читатели больше не теряются в чистой бесконечной длине ваших постов и всегда знают, когда это будет закончено.
Чтобы увидеть полностью рабочий пример, вы можете взглянуть на этот кодепен:
Сторонние пакеты
Существует несколько сторонних пакетов, которые обрабатывают эту точную проблему. Насколько я обнаружил, большинство из них устарели и/или больше не поддерживаются – но что еще более актуально в данный момент: ли вам действительно нужна зависимость третьей партии для действительно простого компонента с примерноми 30 линиями кода? Ну, честно, Я так не думаю Отказ
Заключение
Как вы видели, реализующие прогресс чтения в реакции довольно легко. Благодаря крючкам мы можем реализовать этот компонент как очень маленький функциональный компонент с небольшим количеством накладных расходов.
Если вам понравилось, этот пост не стесняйтесь оставлять ❤, следуйте за мной на Twitter и подписаться на Моя рассылка Отказ Этот пост был первоначально опубликован на nehalist.io Отказ
Оригинал: “https://dev.to/nehalist/creating-a-reading-progress-bar-in-react-4dm3”