react with async fonts

رد الفعل مع المزامنة

React Module للعمل مع خطوط الويب المخصصة المحملة ASYNC ، استنادًا إلى 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 :

تعيين دعامة مع اسم الخط. يمكنك الوصول إليه لاحقًا في 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 :

نصيحة: يمكنك أيضًا استخدام API withFonts إذا كنت حقًا في مخصصات.

لاحظ أن 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>	مكون للالتفاف مع المخصص. حقن 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