react with async fonts

reaccionar con fuentes

React Module para trabajar con fuentes web personalizadas cargadas de Async, basadas en fontfaceobserver .

Nota: La versión 4.x presenta cambios de ruptura con una nueva API. Aborda los problemas, incluida la cancelación de promesas, un mejor rendimiento y tipificaciones de TS.

• Comienzo rápido
• API
  • Componente FontObserver
  • Componente FontSubscriber
  • withFonts hoc
  • Tipo de Font
• Ejemplos
  • Básico con FontSubscriber
  • Básico con con withFonts
  • Con styled-components
  • FontObserver anidado
  • Opciones personalizadas fontfaceobserver
• Licencia

Comienzo rápido

1. Instale react-with-async-fonts :

NPM:

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

hilo:

yarn add react-with-async-fonts

2. Envuelva su componente raíz con FontObserver :

Establezca el apoyo con el nombre de la fuente. Puede acceder a él más tarde en FontSubscriber para verificar si está listo.

 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. Envuelva su objetivo con el componente FontSubscriber :

Consejo: también puede usar con la API withFonts si realmente le gustan los hocs.

Tenga en cuenta que FontSubscriber usa niños Render Prop. La función proporcionada se llamaría con argumento único, que es un objeto con teclas de fuente cargadas.

 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

Componente FontObserver

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

Apuntalar	Tipo	Descripción
text	string	Opciones de .load de fontfaceobserver
timeout	number	opciones de tiempo de espera .load de fontfaceobserver
[key]	Font | string	Fuente Family String o un objeto Font .

Componente FontSubscriber

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

Apuntalar	Tipo	Descripción
children	(fonts: Object) => React.Element<any>	Los niños renderizan la función. Acepta objeto con fuente cargada. Una vez listo, contendría objeto de tipo Font .

withFonts hoc

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

Argumento	Tipo	Descripción
componente	React.ComponentType<any>	Componente para envolver con hoc. Inyecta objeto fonts .

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

Ejemplos

¡Aviso! Cada ejemplo requiere envolver su aplicación con 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' ) ,
) ;

Básico con 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 ;

Básico con con withFonts

Puede usar withFonts Hoc si desea componer su componente. Tenga en cuenta que usa el mismo FontSubscriber debajo del capó.

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

Con styled-components

La forma más elegante de usarlo con styled-components es 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 anidado

Puedes anidar FontObserver para fusionar las fuentes. Las instancias de los niños anulan a los padres si se definió la fuente con el mismo código.

 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 ;

Opciones personalizadas fontfaceobserver

Puede proporcionar opciones text y timeout para el método de carga de fontfaceobserver con los mismos accesorios.

 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 ; 

Licencia

MIT © Sergey Bekrin