font picker react

React 용 글꼴 피커

사용자가 웹 사이트에서 Google 글꼴을 미리보기, 선택 및 사용할 수있는 간단하고 사용자 정의 가능한 글꼴 선택기를 사용합니다.

• 간단한 설정
• 의존성 없음
• 필요한 CSS 선택기의 자동 글꼴 다운로드 및 생성
• 효율적인 글꼴 미리보기 (전체 글꼴은 선택시 다운로드됩니다)

→ 데모

이것은 글꼴 피커 라이브러리의 React 구성 요소입니다.

시작하기

API에 액세스하려면 Google Fonts API 키를 생성해야합니다.

1. 설정

NPM을 사용하여 font-picker-react 패키지를 설치하십시오.

npm install font-picker-react

2. 글꼴 피커 표시

FontPicker 구성 요소를 React 코드에 추가하십시오.

 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. 선택한 글꼴을 적용합니다

선택한 글꼴을 적용하려는 모든 JSX 요소에 클래스 "apply-font" 를 추가하십시오.

사용자가 글꼴을 선택하면 "apply-font" 클래스를 사용하여 자동으로 다운로드하여 모든 요소에 적용됩니다.

소품

다음 소품은 FontPicker 구성 요소로 전달 될 수 있습니다.

• apiKey (필수) : Google API 키
• activeFontFamily : 글꼴 피커에서 선택하고 텍스트에 적용 해야하는 글꼴. 구성 요소 상태에 저장되고 onChange 사용하여 업데이트해야합니다.
• onChange : 사용자가 활성 글꼴을 변경할 때 실행되는 함수. 이 기능은 구성 요소 상태에서 activeFontFamily 업데이트해야합니다
• pickerId : 사이트에 여러 글꼴 피커가있는 경우 소품으로 제공되고 .apply-font 클래스 이름에 추가 해야하는 고유 한 ID를 제공해야합니다. 예 : 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 Props 만 반응합니다.

개발

요구 사항 : Node.js, 원사

1. 이 저장소를 복제하십시오 : git clone REPO_URL
2. 모든 종속성을 설치하십시오 : yarn
3. 라이브러리 번들 : yarn start 생성합니다
4. localhost:3000 에서 렌더링 된 구성 요소를 봅니다

제안과 기여는 항상 환영합니다! 풀 요청을 제출하기 전에 문제를 통해 더 큰 변경 사항을 논의하십시오.