react with async fonts

反應與assync-fonts

React模塊，用於基於fontfaceobserver異步加載的自定義Web字體。

注意：版本4.x引入了新API的破壞變化。它解決了許多問題，包括取消承諾，更好的性能和TS打字。

• 快速開始
• API
  • FontObserver組件
  • FontSubscriber組件
  • withFonts Hoc
  • Font類型
• 例子
  • 基本的FontSubscriber
  • 基本with withFonts
  • 帶有styled-components
  • 嵌套的FontObserver
  • 自定義fontfaceobserver選項
• 執照

快速開始

1. 安裝react-with-async-fonts ：

NPM：

npm install --save react-with-async-fonts

紗：

yarn add react-with-async-fonts

2. 用FontObserver包裹根部組件：

用字體名稱設置道具。您可以稍後在FontSubscriber中訪問它，以檢查是否準備就緒。

 import { FontObserver } from 'react-with-async-fonts' ;
import { render } from 'react-dom' ;
import App from './app' ;

render (
  < FontObserver openSans = "Open Sans" >
    < App />
  </ FontObserver > ,
  document . getElementById ( 'root' ) ,
) ;

3. 用FontSubscriber組件包裝目標：

提示：如果您真的喜歡HOC，也可以withFonts API一起使用。

請注意， FontSubscriber使用兒童渲染道具。提供的函數將用單個參數調用，該參數是帶有已加載字體鍵的對象。

 import { FontSubscriber } from 'react-with-async-fonts' ;

const Heading = ( { children } ) => (
  < FontSubscriber >
    { fonts => (
      < h1 className = { fonts . openSans ? 'opens-sans-font' : 'system-font' } >
        { children }
      </ h1 >
    ) }
  </ FontSubscriber >
) ;

export default Heading ; 

API

FontObserver組件

 import { FontObserver } from 'react-with-async-fonts' ;

支柱	類型	描述
text	string	fontfaceobserver 's .load文本選項
timeout	number	fontfaceobserver的.load超時選項
[key]	Font | string	字體族字符串或Font對象。

FontSubscriber組件

 import { FontSubscriber } from 'react-with-async-fonts' ;

支柱	類型	描述
children	(fonts: Object) => React.Element<any>	兒童渲染功能。接受帶有加載字體的對象。準備好後，它將包含Font類型的對象。

withFonts Hoc

 import { withFonts } from 'react-with-async-fonts' ;

爭論	類型	描述
成分	React.ComponentType<any>	與HOC包裹的組件。注入fonts對象。

Font類型

 type Font = {
  family : String ,
  weight ?:
    | 'normal'
    | 'bold'
    | 'bolder'
    | 'lighter'
    | '100'
    | '200'
    | '300'
    | '400'
    | '500'
    | '600'
    | '700'
    | '800'
    | '900' ,
  style ?: 'normal' | 'italic' | 'oblique' ,
  stretch ?:
    | 'normal'
    | 'ultra-condensed'
    | 'extra-condensed'
    | 'condensed'
    | 'semi-condensed'
    | 'semi-expanded'
    | 'expanded'
    | 'extra-expanded'
    | 'ultra-expanded' ,
} ; 

例子

小心！每個示例都需要用FontObserver包裝您的應用程序：

 import React from 'react' ;
import { render } from 'react-dom' ;
import { FontObserver } from 'react-with-async-fonts' ;
import App from './app' ;

render (
  < FontObserver montserrat = "Montserrat" >
    < App />
  </ FontObserver > ,
  document . getElementById ( 'root' ) ,
) ;

基本的FontSubscriber

 import React from 'react' ;
import { FontSubscriber } from 'react-with-async-fonts' ;

const Heading = ( { children } ) => (
  < FontSubscriber >
    { fonts => (
      < h1 className = { fonts . montserrat && 'montserrat-font' } > { children } </ h1 >
    ) }
  </ FontSubscriber >
) ;

export default Heading ;

基本with withFonts

如果要組成組件，則可以withFonts HOC一起使用。請注意，它在引擎蓋下使用相同的FontSubscriber 。

 import React from 'react' ;
import { withFonts } from 'react-with-async-fonts' ;

const Heading = ( { children , fonts } ) => (
  < h1 className = { fonts . montserrat && 'montserrat-font' } > { children } </ h1 >
) ;

export default withFonts ( Heading ) ;

帶有styled-components

與styled-components一起使用的最優雅的方法是withFonts HOC一起使用。

 import styled from 'styled-components' ;
import { withFonts } from 'react-with-async-fonts' ;

const Heading = styled . h2 `
  font-weight: 300;
  font-family: ${ props =>
    props . fonts . montserrat
      ? '"Open Sans", sans-serif'
      : 'Helvetica, sans-serif' } ;
` ;

export default withFonts ( Heading ) ;

嵌套的FontObserver

您可以嵌套FontObserver合併字體。如果定義了具有相同代碼的字體，則兒童實例將覆蓋父級。

 import { FontObserver , FontSubscriber } from 'react-with-async-fonts' ;

const Article = ( { title , children } ) => (
  < FontObserver roboto = "Roboto" >
    < FontObserver ptSans = "PT Sans" >
      < FontSubscriber >
        { fonts => (
          < article >
            < h1 className = { fonts . roboto ? 'roboto' : 'sans-serif' } > { title } </ h1 >
            < p className = { fonts . ptSans ? 'ptsans' : 'serif' } > { children } </ p >
          </ article >
        ) }
      </ FontSubscriber >
    </ FontObserver >
  </ FontObserver >
) ;

export default Article ;

自定義fontfaceobserver選項

您可以為fontfaceobserver的.load方法提供具有相同道具的text和timeout選項。

 import { FontObserver , FontSubscriber } from 'react-with-async-fonts' ;

const Heading = ( { children } ) => (
  < FontObserver text = { children } timeout = { 2500 } roboto = "Roboto" >
    < FontSubscriber >
      { fonts => < h1 className = { fonts . roboto && 'roboto' } > { children } </ h1 > }
    </ FontSubscriber >
  </ FontObserver >
) ;

export default Heading ; 

執照

麻省理工學院©Sergey Bekrin