react with async 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 로 루트 구성 요소를 감싸십시오.

글꼴 이름으로 소품을 설정하십시오. 나중에 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 의. 텍스트 옵션을 .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 ;

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 폰트가 있습니다.

 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 둥지로하여 글꼴을 병합 할 수 있습니다. 동일한 코드가있는 글꼴이 정의 된 경우 Children Instances가 부모를 대체합니다.

 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 ; 

특허

MIT © Sergey Bekrin