react font

reaccionar

Componentes simples para usar fácilmente fuentes personalizadas para el texto en React

Actualmente solo admite Google Fonts por ahora.

Instalar

 npm i react-font

 yarn add react-font

Componentes

<Font /> aplicar la fuente a los componentes infantiles

<Text /> usa <p /> en lugar de Div

Accesorios

family="Kufam" El nombre de la fuente que desea usar.

weight={700} El peso de la fuente, 400 es normal, 700 es audaz, no todas las fuentes admiten todos los pesos, verifique las fuentes de Google.

italic={true} Si la fuente debe ser cursiva, no todas las fuentes la admiten, pero CSS aún hará que cualquier fuente se incline para fingirla.

onLoad: (family: string, style: string) => void llamado cuando esa fuente se carga, analiza y visualiza, útil para ocultar el texto hasta que se carga.

onError: (family: string, style: string) => void llamado Si la fuente no se carga, ya sea un apellido de fuentes que no existe o Google Fonts no pudo responder con la fuente.

onAllLoad: () => void Like Onload pero una vez que todas las fuentes se han cargado. No funciona en el componente <Text /> por alguna razón.

onAllError: () => void como onError Pero si todas las fuentes no se cargan, por ejemplo, si el usuario no tiene internet y la fuente no se almacena en caché.

Uso

Aplicar cualquier fuente fácilmente

 import React from 'react'
import Font , { Text } from 'react-font'

const Example = ( ) => {
  return (
    < Font family = 'Viga' onAllLoad = { ( ) => console . log ( 'all loaded' ) } >
      < Font family = 'Ultra' >
        < h3 > Easily apply fonts </ h3 >
      </ Font >
      < Font family = 'Press Start 2P' >
        < p > Use any font from google fonts with ease </ p >
        < p >
          Either wrap a large portion of the app in a Font or just use the font
          where you want
        </ p >
      </ Font >
      < p >
        No hassle with putting the link in the head tag or importing with css
      </ p >
      < Text family = 'Monoton' style = { { fontSize : 50 , margin : 0 } } onLoad = { ( ) => console . log ( 'loaded Monoton' ) } >
        Super simple :)
      </ Text >
    </ Font >
  )
}

export default Example 

Apoya la cursiva y el peso de la fuente

 import React from 'react'
import Font , { Text } from 'react-font'

const RobotoExample = ( ) => {
  return (
    < >
      < Font family = 'Roboto' >
        < p > Roboto :) </ p >
      </ Font >
      < Text family = 'Roboto' italic >
        Roboto Italic :/
      </ Text >
      < Font family = 'Roboto' weight = { 700 } >
        < p > Roboto Bold :| </ p >
      </ Font >
      < Text family = 'Roboto' italic weight = { 700 } >
        Roboto Italic Bold ;)
      </ Text >
    </ >
  )
}

export default RobotoExample 

Licencia

MIT © Nwylynko