react font

réactif

Composants simples pour utiliser facilement les polices personnalisées pour le texte en réaction

Actuellement, ne prend en charge que les polices Google pour l'instant.

Installer

 npm i react-font

 yarn add react-font

Composants

<Font /> appliquer une police aux composants enfants

<Text /> utilise <p /> au lieu de div

Accessoires

family="Kufam" Le nom de la police que vous souhaitez utiliser.

weight={700} Le poids de la police, 400 est normal, 700 est audacieux, toutes les polices ne prennent pas en charge tous les poids, vérifient les polices Google.

italic={true} Si la police doit être italique, toutes les polices ne la soutiennent pas mais que CSS fera toujours une inclinaison de police pour la simuler.

onLoad: (family: string, style: string) => void appelé lorsque cette police est chargée, analysée et affichage, utile pour masquer le texte jusqu'à ce qu'il se charge.

onError: (family: string, style: string) => void appelé si la police ne se charge pas, soit un nom de famille de police a été mis qui n'existe pas ou que les polices Google n'ont pas répondu avec la police.

onAllLoad: () => void comme onload mais une fois que toutes les polices ont été chargées. Ne fonctionne pas sur le composant <Text /> pour une raison quelconque.

onAllError: () => void comme onerror mais si toutes les polices ne se chargent pas, par exemple si l'utilisateur n'a pas Internet et que la police n'est pas mise en cache.

Usage

Appliquer facilement n'importe quelle police

 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 

Soutient les italiques et le poids de la police

 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 

Licence

MIT © NWYLYNKO