Создание навигации, которая динамически меняется при прокрутке с использованием React Hooks

Когда я начал создавать веб-сайты с помощью React, я также задавался вопросом, как я собираюсь создать навигацию, которая динамически менялась бы при прокрутке страницы пользователем.

Оказывается, это было намного проще, чем я думал. Давайте посмотрим, как этого добиться.

1. Создать компонент навигации

Я предполагаю, что у вас есть необходимая настройка приложения React. В исходной папке (src) создайте файл и назовите его Navigation.js. Чтобы создать нашу реагирующую навигацию, мы будем использовать такой функциональный компонент:

import React from "react";
const Navigation = () => {
  return (
    <ul>
      <li><a href="https://yoursite.com">Home</a></li>
      <li><a href="https://yoursite.com/articles">Articles</a></li>
      <li><a href="https://yoursite.com/gallery">Gallery</a></li>
      <li><a href="https://yoursite.com/contact">Contact</a></li>
    </ul>
  );
}
export default Navigation;

Приведенный выше компонент навигации просто возвращает неупорядоченный список со ссылками на различные разделы вашего сайта.

2. Добавить стиль навигации

Далее мы создадим стиль для компонента навигации. Есть несколько способов сделать это, однако мы будем использовать встроенный стиль, чтобы позволить нам управлять стилем нашей навигации, когда пользователь прокручивает.

Мы создадим два объекта, содержащие свойства стиля, которые мы хотим динамически изменить:

const navTop = {
  backgroundColor: "#333",
  transition: "all 0.3s",
};
const navScroll = {
  backgroundColor: "#F00",
  transition: "all 0.3s",
};

Добавив это к нашему компоненту, мы имеем:

import React from "react";
const navTop = {
  backgroundColor: "#333",
  transition: "all 0.3s",
};
const navScroll = {
  backgroundColor: "#F00",
  transition: "all 0.3s",
};
const Navigation = () => {
  return (
    <ul style={navTop}>
      <li><a href="https://yoursite.com">Home</a></li>
      <li><a href="https://yoursite.com/articles">Articles</a></li>
      <li><a href="https://yoursite.com/gallery">Gallery</a></li>
      <li><a href="https://yoursite.com/contact">Contact</a></li>
    </ul>
  );
}
export default Navigation;

Вы также можете добавить стиль по умолчанию для вышеуказанного компонента в отдельный файл CSS (Navigation.css) в исходной папке и добавить в компонент навигации следующим образом:

import React from "react";
import "./Navigation.css"
const navTop = {
  backgroundColor: "#333",
  transition: "all 0.3s",
};
const navScroll = {
  backgroundColor: "#F00",
  transition: "all 0.3s",
};
const Navigation = () => {
  return (
    <ul className="nav" style={navTop}>
      <li><a href="https://yoursite.com">Home</a></li>
      <li><a href="https://yoursite.com/articles">Articles</a></li>
      <li><a href="https://yoursite.com/gallery">Gallery</a></li>
      <li><a href="https://yoursite.com/contact">Contact</a></li>
    </ul>
  );
}
export default Navigation;

3. Внедряйте хуки React!

Здесь происходит волшебство, мы вводим хуки React. Если вы не знаете о хуках React, вы можете узнать о них больше. Они очень удобны, поскольку помогают нам создавать функциональные компоненты с состояниями.

Раньше это было возможно только с классовыми компонентами, но теперь мы можем добиться управления состоянием с помощью функциональных компонентов с помощью React Hooks! Хуки помогут нам изменить состояние компонента при прокрутке пользователем.

Для нашего компонента мы будем использовать 2 хука React, а именно: хуки useState и useEffect.

import React, { useState, useEffect } from "react";

Хук реакции useState помогает нам установить начальное состояние (navState) компонента Navigation для нашего объекта navTop и помогает нам указать метод установки (setNavState), который изменяет navState при прокрутке пользователем.

const [navState, setNavState] = useState(navTop);

Мы также укажем, что стиль для нашего компонента навигации должен быть navState, например:

<ul className="nav" style={navState}>

Добавив приведенные выше строки кода в наш компонент, мы имеем:

import React, { useState, useEffect } from "react";
import "./Navigation.css"
const navTop = {
  backgroundColor: "#333",
  transition: "all 0.3s",
};
const navScroll = {
  backgroundColor: "#F00",
  transition: "all 0.3s",
};
const Navigation = () => {
  const [navState, setNavState] = useState(navTop);
  return (
    <ul className="nav" style={navState}>
      <li><a href="https://yoursite.com">Home</a></li>
      <li><a href="https://yoursite.com/articles">Articles</a></li>
      <li><a href="https://yoursite.com/gallery">Gallery</a></li>
      <li><a href="https://yoursite.com/contact">Contact</a></li>
    </ul>
  );
}
export default Navigation;

И, наконец, мы используем хук useEffect для захвата события onscroll окна. Это позволяет нам деструктурировать свойства объекта окна и проверять, когда пользователь прокручивает до определенной точки (в данном случае 100 пикселей до нижней части экрана):

useEffect(() => {
    window.onscroll = () => {
      const { innerHeight: height, scrollY: scrollPosition } = window;
      scrollPosition > height - 100 
        ? setNavState(navScroll) 
        : setNavState(navTop);
    };
  }, []);

Добавив это к нашему компоненту, мы получим следующее:

import React, { useState, useEffect } from "react";
import "./Navigation.css"
const navTop = {
  backgroundColor: "#333",
  transition: "all 0.3s",
};
const navScroll = {
  backgroundColor: "#F00",
  transition: "all 0.3s",
};
const Navigation = () => {
  const [navState, setNavState] = useState(navTop);
useEffect(() => {
    window.onscroll = () => {
      const { innerHeight: height, scrollY: scrollPosition } = window;
      scrollPosition > height - 100 
        ? setNavState(navScroll) 
        : setNavState(navTop);
    };
  }, []);
return (
    <ul className="nav" style={navState}>
      <li><a href="https://yoursite.com">Home</a></li>
      <li><a href="https://yoursite.com/articles">Articles</a></li>
      <li><a href="https://yoursite.com/gallery">Gallery</a></li>
      <li><a href="https://yoursite.com/contact">Contact</a></li>
    </ul>
  );
}
export default Navigation;

Заключение

И, наконец, у нас есть полноценный компонент навигации, который динамически реагирует на активность пользователя при прокрутке с помощью React Hooks. Вы можете увидеть пример этого на моем любимом проекте на CodeHub.pro.

Теперь вы тоже можете создать что-то классное по своему выбору.

Удачного кодирования…