react with async fonts

react-with-async-fonts

Module React pour travailler avec des polices Web personnalisées chargées asynchrones, basées sur fontfaceobserver .

Remarque: la version 4.x introduit des changements de rupture avec la nouvelle API. Il traite des problèmes, notamment l'annulation des promesses, de meilleures performances et des tapis TS.

• Démarrage rapide
• API
  • Composant FontObserver
  • Composant FontSubscriber
  • withFonts hoc
  • Type de Font
• Exemples
  • Basique avec FontSubscriber
  • Basique avec withFonts
  • Avec styled-components
  • FontObserver imbriqué
  • Options fontfaceobserver personnalisé
• Licence

Démarrage rapide

1. Installez react-with-async-fonts :

NPM:

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

fil:

yarn add react-with-async-fonts

2. Enveloppez votre composant racine avec FontObserver :

Définissez Prop avec nom de police. Vous pouvez y accéder plus tard dans FontSubscriber pour vérifier s'il est prêt.

 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. Enveloppez votre cible avec un composant FontSubscriber :

Astuce: vous pouvez également utiliser avec l'API withFonts si vous êtes vraiment dans les hocs.

Notez que FontSubscriber utilise des enfants Render Prop. La fonction fournie serait appelée avec un seul argument qui est un objet avec des touches de police chargées.

 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

Composant FontObserver

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

Soutenir	Taper	Description
text	string	Options de texte .load de fontfaceobserver
timeout	number	Options de délai d' .load de fontfaceobserver .
[key]	Font | string	Chaîne de famille de polices ou objet Font .

Composant FontSubscriber

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

Soutenir	Taper	Description
children	(fonts: Object) => React.Element<any>	Les enfants rendent la fonction. Accepte l'objet avec une police chargée. Une fois prêt, il contiendrait un objet de type Font .

withFonts hoc

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

Argument	Taper	Description
composant	React.ComponentType<any>	Composant pour envelopper avec HOC. Injecte fonts objet.

Type de 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' ,
} ; 

Exemples

Attention! Chaque exemple nécessite d'emballer votre application avec 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' ) ,
) ;

Basique avec 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 ;

Basique avec withFonts

Vous pouvez utiliser withFonts HOC si vous souhaitez composer votre composant. Veuillez noter qu'il utilise le même FontSubscriber sous le capot.

 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 ) ;

Avec styled-components

La façon la plus élégante de l'utiliser avec styled-components est 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 imbriqué

Vous pouvez nicher FontObserver pour fusionner les polices. Les instances des enfants remplacent le parent si la police avec le même code a été définie.

 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 ;

Options fontfaceobserver personnalisé

Vous pouvez fournir des options text et timeout pour la méthode .Load de fontfaceobserver avec les mêmes accessoires.

 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 ; 

Licence

MIT © Sergey Bekrin