react font

reagieren

Einfache Komponenten, um einfach benutzerdefinierte Schriftarten für Text in React zu verwenden

Derzeit unterstützt Google -Schriftarten vorerst nur.

Installieren

 npm i react-font

 yarn add react-font

Komponenten

<Font /> Schriftart auf untergeordnete Komponenten anwenden

<Text /> verwendet <p /> anstelle von div

Requisiten

family="Kufam" Der Name der Schriftart, die Sie verwenden möchten.

weight={700} Das Gewicht der Schriftart, 400 ist normal, 700 ist fett, nicht alle Schriftarten unterstützen alle Gewichte, prüfen Google -Schriftarten.

italic={true} Wenn die Schriftart kursiv sein sollte, nicht alle Schriftarten unterstützen, aber CSS macht immer noch eine Schriftart, um sie zu fälschen.

onLoad: (family: string, style: string) => void wenn diese Schrift geladen, analysiert und angezeigt wird, nützlich, um den Text zu verbergen, bis er geladen wird.

onError: (family: string, style: string) => void aufgerufen, wenn die Schriftart nicht geladen wird, entweder ein Schriftfamilienname eingefügt wurde, der nicht existiert, oder Google -Schriftarten konnten mit der Schriftart nicht reagieren.

onAllLoad: () => void wie Onload, aber sobald alle Schriftarten geladen sind. Funktioniert aus irgendeinem Grund nicht auf der <Text /> -Komponente.

onAllError: () => void wie onError Aber wenn nicht alle Schriftarten geladen werden, z. B. wenn der Benutzer kein Internet hat und die Schriftart nicht zwischengespeichert wird.

Verwendung

Tragen Sie eine beliebige Schriftart einfach auf

 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 

Unterstützt Kursivschrift und Schriftgewicht

 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 

Lizenz

Mit © Nwylynko