react with async fonts

React-with-async-fonts

React Module สำหรับการทำงานกับ Async Loaded Web Fonts ที่กำหนดเองตาม fontfaceobserver

หมายเหตุ: เวอร์ชัน 4.x แนะนำการเปลี่ยนแปลงการเปลี่ยนแปลงด้วย API ใหม่ มันแก้ไขปัญหามากมายรวมถึงการยกเลิกสัญญาประสิทธิภาพที่ดีขึ้นและการพิมพ์ TS

• เริ่มต้นอย่างรวดเร็ว
• API
  • ส่วนประกอบ FontObserver
  • ส่วนประกอบ FontSubscriber
  • withFonts hoc
  • ประเภท Font
• ตัวอย่าง
  • พื้นฐานด้วย FontSubscriber
  • พื้นฐานด้วย 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 :

ตั้งค่า Prop ด้วยชื่อตัวอักษร คุณสามารถเข้าถึงได้ในภายหลังใน 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 Component:

เคล็ดลับ: คุณสามารถใช้กับ withFonts API ได้หากคุณเข้าสู่ HOCS จริงๆ

โปรดทราบว่า 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	ตัวเลือก .load ของ fontfaceobserver
timeout	number	ตัวเลือกการ .load เวลาของ fontfaceobserver
[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 ;

พื้นฐานด้วย 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 ที่กำหนดเอง

คุณสามารถให้ตัวเลือก text และ timeout สำหรับวิธีการโหลดของ fontfaceobserver ด้วยอุปกรณ์ประกอบฉากเดียวกัน

 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 ; 

ใบอนุญาต

MIT © Sergey Bekrin