react font

Реакт-Фонт

Простые компоненты, которые легко использовать пользовательские шрифты для текста в React

В настоящее время поддерживает только шрифты Google.

Установить

 npm i react-font

 yarn add react-font

Компоненты

<Font /> Применить шрифт к детским компонентам

<Text /> использует <p /> вместо div

Реквизит

family="Kufam" название шрифта, который вы хотите использовать.

weight={700} Вес шрифта, 400 - это нормальный, 700 - жирным шрифтом, не все шрифты поддерживают все веса, проверьте шрифты Google.

italic={true} Если шрифт должен быть курсивом, не все шрифты поддерживают его, но CSS все равно сделает какой -либо наклон шрифта, чтобы подделать его.

onLoad: (family: string, style: string) => void вызывается, когда этот шрифт загружается, анализируется и отображается, полезно, чтобы скрыть текст, пока он не загрузится.

onError: (family: string, style: string) => void вызывается. Если шрифт не загружается, либо была указана фамилия для шрифта, которое не существует, либо шрифты Google не удалось ответить с помощью шрифта.

onAllLoad: () => void как нагрузка, но после загрузки всех шрифтов. По какой -то причине не работает на компоненте <Text /> .

onAllError: () => void как Onerror, но если все шрифты не загружаются, например, если у пользователя нет интернета, а шрифт не кэширован.

Использование

Легко применить любой шрифт

 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 

Поддерживает курсив и вес шрифта

 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 

Лицензия

MIT © Nwylynko