Как добавить шрифт в 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;

Часто, вызывая action creator, мы забываем обернуть его в dispatch(), а вместо этого вызываем как обычная функцию. Таким образом action не доходит до редьюсера.

addProductToCart(product); // не верно
dispatch(addProductToCart(product)); // верно

Мы создадим собственный хук, в котором будет выполняться обертывание вызова функции в dispatch(), чтобы мы могли отправлять наши экшены, вызывая их как обычные функции с уже встроенным диспатчингом.

import { useCallback } from 'react';
import { useDispatch } from 'react-redux';

export const useWithDispatch = (fn) => {
  const dispatch = useDispatch();

  return useCallback(
    payload => () => dispatch(fn(payload)),
    [dispatch, fn]
  ) 
}

Реализация довольно проста. useWithDispatch — это функция высшего порядка, поскольку она принимает функцию (action creator) в качестве аргумента и возвращает другую функцию, которая при вызове вызовет переданную функцию, обернутую с помощью dispatch(). Обязательно запоминаем функцию обратного вызова с помощью useCallback.

Допустим, мы работаем над приложением списка задач, и у нас есть действие addTask(), которое берет текст задачи и добавляет его в список задач:

// actions.js

const addTaskAction = (text) => {
  return {
    type: 'ADD_TASK',
    payload: {
      id: 'some-id',
      text
    }
  }
}

В компоненте вызов будет выглядеть следующим образом.

import { addTaskAction } from './actions';

export const Component = () => {
  const addTask = useWithDispatch(addTaskAction);

  const handleClick = () => {
    addTask('Learn Redux');
  }

  // ...
}

Итоги

Я надеюсь, что вы нашли этот пост полезным. Вам по-прежнему нужно помнить о передаче создателей действий (action creator) в useWithDispatch, но будет легче запомнить, что вы делаете это в самом начале, а не при их вызове.