react with async fonts

Реакция с асинхронными фигурами

React Module для работы с Async Louted Custom 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 :

Установить опору с именем шрифта. Вы можете получить доступ к нему позже в 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 :

Совет: вы также можете использовать 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	fontfaceobserver 's .load
timeout	number	fontfaceobserver 's .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 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