开源项目 `font-picker-react` 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00711/article/details/142039203

开源项目 `font-picker-react` 使用教程

font-picker-react✏️ Font selector component for Google Fonts项目地址:https://gitcode.com/gh_mirrors/fo/font-picker-react

1. 项目介绍

font-picker-react 是一个用于 React 的 Google 字体选择器组件。它允许用户从 Google Fonts 库中选择字体，并将其应用到网页中。该项目的主要特点包括：

无依赖：除了 React 之外，没有其他外部依赖。
无需 Google API 密钥：可以直接使用，无需配置 Google API 密钥。
1600+ Google 字体：支持从 Google Fonts 库中选择超过 1600 种字体。
自定义化：可以自定义字体选择器的样式和行为。
高性能：使用预生成的 SVG 图像进行快速、高质量的字体预览。

2. 项目快速启动

安装

首先，使用 npm 或 yarn 安装 font-picker-react：

# 使用 npm 安装
npm install font-picker-react

# 使用 yarn 安装
yarn add font-picker-react

使用

安装完成后，可以在 React 项目中导入并使用 FontPicker 组件：

import React, { useState } from 'react';
import FontPicker from 'font-picker-react';

function App() {
  const [activeFont, setActiveFont] = useState('Open Sans');

  return (
    <div>
      <FontPicker
        apiKey="YOUR_GOOGLE_FONTS_API_KEY"
        activeFontFamily={activeFont}
        onChange={(nextFont) => setActiveFont(nextFont.family)}
      />
      <p style={{ fontFamily: activeFont }}>
        这段文字将使用选中的字体显示。
      </p>
    </div>
  );
}

export default App;