Как добавить шрифт в React приложение

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

Можно ссылаться на любые шрифты, размещенные в Интернете, используя тег <link> внутри HTML-файла. Давайте рассмотрим пример применения Google шрифтов с помощью тега <link>.

• Перейдите на fonts.google.com
• Выберите понравившийся шрифт и скопируйте его имя

• Вставьте в index.html линк со ссылкой на шрифт. Если ваше приложение создано с помощью create-react-app, вы найдете index.html в папке public.

Например, подключение шрифта Dancing Script будет выглядеть следующим образом.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

• Настройте css класс с помощью веб-шрифта в таблице стилей, указав font-family: 'Font Name', например, в index.css:

.font-dancing-script {
  font-family: 'Dancing Script';
}

• Примените селектор в любом React компоненте

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-dancing-script">
      <p>Hello</p>
    </div>
  );
}

export default App;

Использование загруженного шрифта с @font-face

В некоторых ситуациях подключение шрифтов онлайн может быть недоступно или запрещено. Классический пример: пользователи вашего приложения используют интранет и имеют ограниченный доступ к Интернету. В таких случаях шрифты должны быть загружены локально и упакованы в приложение. @font-face — это CSS правило для определения шрифта путем указания шрифта с помощью URL-адреса.

• Создайте папку с именем fonts в src.
• Загрузите необходимые шрифты в папку src\fonts. В этом примере мы загрузили шрифт Dancing Script.

• Затем импортируйте шрифты в файл index.js

// index.js

import './fonts/DancingScript/DancingScript-Bold.ttf';

• В index.css добавьте

@font-face {
  font-family: 'DancingScript';
  src: local('DancingScript'),
    url('./fonts/DancingScript/DancingScript-Bold.ttf') format('truetype');
  font-weight: bold;
}

• Теперь добавьте в файл index.css имя класса, в котором используется этот font family.

.font-dancing-script {
  font-family: "DancingScript";
}

• Используйте это имя класса в своем React компоненте.

// App.jsx

import './App.css';

function App() {
  return (
    <div className="font-dancing-script">
      <p>Hello</p>
    </div>
  );
}

export default App;

1. Хук useWindowSize - хук для получения размера экрана

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

import { useState, useEffect } from "react";

interface WindowSize {
  width: number;
  height: number;
}

const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return windowSize;
};

Этот хук может быть особенно полезен при реализации отзывчивого дизайна, когда по какой-то причине вам нужно запустить определенный код при определенных размерах. Более продвинутый вариант этого хука можно найти в статье “Хук useResize для отслеживания ширины экрана в ReactJS”.

2️. Хук useKeyPress - хук для определения нажатия клавиши

Следующий хук позволяет определить, когда нажата определенная клавиша. Это может вызвать события или действия, основанные на нажатой клавише. Например, для закрытия модального окна, отправки формы и т.д.

import { useState, useEffect } from "react";

const useKeyPress = (targetKey: string): boolean => {
  const [keyPressed, setKeyPressed] = useState(false);

  const downHandler = ({ key }: KeyboardEvent) => {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  };

  const upHandler = ({ key }: KeyboardEvent) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", downHandler);
    window.addEventListener("keyup", upHandler);

    return () => {
      window.removeEventListener("keydown", downHandler);
      window.removeEventListener("keyup", upHandler);
    };
  }, []);

  return keyPressed;
};

Пример использования:

const closeModalKeyPress = useKeyPress("Escape");

3. Хук useInterval - хук для вызова функции setInterval

Этот хук позволяет вам использовать функцию setInterval в качестве хука. Как и функция setInterval, этот хук имеет множество применений, например, анимация, обновление данных через регулярные промежутки времени или даже установка таймера.

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

const useInterval = (callback: () => void, delay: number | null) => {
  const savedCallback = useRef<() => void>();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current && savedCallback.current();
    }
    if (delay !== null && delay > 0) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    } else {
      tick();
    }
  }, [delay]);
};

Можно использовать этот хук следующим образом:

const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);

4. Хук useDebounce

Теперь мы поговорим о хуке, который выполняет функцию только после того, как пройдет определенное количество времени без ее вызова. Это полезно, например, для ограничения скорости вызовов API или обновления состояния при изменении ввода, например, когда вы набираете текст в поисковой строке.

import { useEffect, useRef } from 'react';

export function useDebounce(callback:Function, timeout: number = 200, deps: Array<any> = []) {
  const data = useRef({ firstTime: true });
  useEffect(() => {
    const { firstTime, clearFunc } = data.current;

    const handler = setTimeout(() => {
      if (clearFunc && typeof clearFunc === 'function') {
        clearFunc();
      }
      data.current.clearFunc = callback();
    }, timeout);

    return () => {
      clearTimeout(handler);
    };
  }, [timeout, ...deps]);
}

export default useDebounce;

Пример использования:

const [inputValue, setInputValue] = useState("");

useDebounce(() => {
  // вызов APIl
}, 500);

5️. Хук useThrottle

Throttle означает, что функция будет выполняться один раз за каждый заданный промежуток времени. Это может быть полезно для предотвращения быстрого запуска слишком большого количества вызовов API или событий.

import { useEffect, useRef } from 'react';

export const useThrottle = (callback:Function, delay: number = 200, deps: Array<any> = []) => {
  const lastRan = useRef(Date.now());

  useEffect(
    () => {
      const handler = setTimeout(function() {
        if (Date.now() - lastRan.current >= delay) {
          callback();
          lastRan.current = Date.now();
        }
      }, delay - (Date.now() - lastRan.current));

      return () => {
        clearTimeout(handler);
      };
    },
    [delay, ...deps],
  );
};

export default useThrottle;

Пример:

const [inputValue, setInputValue] = useState("");

useThrottle(() => {
  // вызов API
}, 500);

Еще больше крутых хуков вы можете найти в каталоге хуков.