Как добавить шрифт в React приложение
2 года назад·2 мин. на чтение
В HTML шрифт используется для указания начертания шрифта, размера шрифта, типографики текста. Вы можете добавлять шрифты в свое React приложение разными способами. В этой статьей рассмотрим два быстрых способа добавления шрифтов в React приложение.
Использование link
со ссылкой на шрифт
Можно ссылаться на любые шрифты, размещенные в Интернете, используя тег <link>
внутри HTML-файла. Давайте рассмотрим пример применения Google шрифтов с помощью тега <link>
.
- Перейдите на fonts.google.com
- Выберите понравившийся шрифт и скопируйте его имя
- Вставьте в
index.html
линк со ссылкой на шрифт. Если ваше приложение создано с помощьюcreate-react-app
, вы найдетеindex.html
в папкеpublic
.
<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;
Кастомный хук для диспатчинга Redux экшенов
2 года назад·1 мин. на чтение
В этой статье напишем кастомный хук для вызова action creator’а Redux вместе с dispatch() внутри.
Часто, вызывая 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
, но будет легче запомнить, что вы делаете это в самом начале, а не при их вызове.