font picker react

Сборщик шрифта для React

Простой, настраиваемый сборщик шрифтов, позволяющий пользователям предварительно просмотреть, выбирать и использовать шрифты Google на вашем веб -сайте.

• Простая настройка
• Нет зависимостей
• Автоматическая загрузка шрифта и генерация необходимых селекторов CSS
• Эффективные предварительные просмотра шрифтов (полные шрифты загружаются только при выборе)

→ Демо

Это компонент React для библиотеки выбора шрифтов .

Начиная

Чтобы иметь возможность получить доступ к API, вам нужно сгенерировать ключ API Google Fonts.

1. Установка

Установите пакет font-picker-react используя NPM:

npm install font-picker-react

2. Отображение сборщика шрифта

Добавьте компонент FontPicker в свой код реагирования:

 import React , { Component } from "react" ;
import FontPicker from "font-picker-react" ;

export default class ExampleComponent extends Component {
	constructor ( props ) {
		super ( props ) ;
		this . state = {
			activeFontFamily : "Open Sans" ,
		} ;
	}

	render ( ) {
		return (
			< div >
				< FontPicker
					apiKey = "YOUR_API_KEY"
					activeFontFamily = { this . state . activeFontFamily }
					onChange = { ( nextFont ) =>
						this . setState ( {
							activeFontFamily : nextFont . family ,
						} )
					}
				/>
				< p className = "apply-font" > The font will be applied to this text. </ p >
			</ div >
		) ;
	}
}

3. Применение выбранного шрифта

Добавьте класс "apply-font" ко всем элементам JSX, которые вы хотите применить к выбранному шрифту.

Когда пользователь выбирает шрифт, он будет автоматически загружаться и применяться ко всем элементам с классом "apply-font" .

Реквизит

Следующие реквизиты могут быть переданы в компонент FontPicker :

• apiKey (требуется) : Google API -ключ
• activeFontFamily : шрифт, который должен быть выбран в сборщике шрифтов и применен к тексту. Следует хранить в состоянии компонента и обновляться с помощью onChange
• onChange : Функция, которая выполняется, когда пользователь меняет активный шрифт. Эта функция должна обновлять activeFontFamily в состоянии компонента
• pickerId : Если на вашем сайте есть несколько сборщиков шрифтов, вам необходимо дать им уникальные идентификаторы, которые должны быть предоставлены в качестве опоры и добавлены к именам класса .apply-font . Пример: если pickerId="main" , используйте className="apply-font-main"
• families : если только конкретные шрифты появляются в списке, укажите их имена в массиве. По умолчанию: все семьи шрифтов
• categories : массив категорий шрифтов, чтобы включить в список. Возможные значения: "sans-serif", "serif", "display", "handwriting", "monospace" . По умолчанию: все категории
• scripts : массив сценариев, которые должны включать шрифты и которые будут загружены на выбор шрифта. По умолчанию: ["latin"] . Пример: ["latin", "greek", "hebrew"] (см. Все возможные значения)
• variants : массив вариантов, которые должны включать шрифты и которые будут загружены при выборе шрифта. По умолчанию: ["regular"] . Пример: ["regular", "italic", "700", "700italic"] (см. Все возможные значения)
• filter : функция, которая должна оцениваться в true , чтобы шрифт был включен в список. По умолчанию: font => true . Пример: если font => font.family.toLowerCase().startsWith("m") , только шрифты, чьи имена начинаются с "m", будут в списке
• limit : максимальное количество шрифтов для отображения в списке (наименее популярные шрифты будут опущены). По умолчанию: 50
• sort : сортировка атрибута для списка шрифтов. Возможные ценности: "alphabet", "popularity" . По умолчанию: "alphabet"

В настоящее время только активные реквизиты activeFontFamily , onChange и sort Reactive.

Разработка

Требования: node.js, пряжа

1. Клонировать этот репозиторий: git clone REPO_URL
2. Установить все зависимости: yarn
3. Создать пакет библиотеки: yarn start
4. Посмотреть визуализированный компонент на localhost:3000

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