https://github.com/vpicone/react-variable-fonts

A React Hook for loading and using variable fonts.
https://github.com/vpicone/react-variable-fonts

Last synced: 18 days ago
JSON representation

A React Hook for loading and using variable fonts.

• Host: GitHub
• URL: https://github.com/vpicone/react-variable-fonts
• Owner: vpicone
• License: mit
• Created: 2018-12-10T20:59:51.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-11T02:20:21.000Z (almost 6 years ago)
• Last Synced: 2024-10-11T22:32:17.073Z (about 1 month ago)
• Language: TypeScript
• Size: 23.4 KB
• Stars: 15
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


    react-variable-fonts

    


    


    🖋️

    


    


  

  


  

    A React Hook for loading and manipulating variable fonts.

    


    You need React ^16.7.0-alpha.0 to use Hooks.

      


  What can my font do?

  



## Setup

#### Install the package

[![npm version](https://badge.fury.io/js/react-variable-fonts.svg)](https://badge.fury.io/js/react-variable-fonts)

npm i react-variable-fonts


#### Define your font-face somewhere in your stylesheet

```css

@font-face {

    font-family: "Rocher";

    src: url("./Rocher.woff2") format("woff2");

    font-display: block;

    font-weight: normal;

}

```

## Usage

#### Pass in a font-family string and some initial settings (or `normal`).

```javascript

const settings = {

  // axis: value,

  SHDW: 40,

  BVEL: 100

}

const [styles] = useVariableFont("Rocher", settings);

```

#### The first index will be CSS property object.

```javascript

const [normalStyles] = useVariableFont("Rocher", "normal");

return 
Hello world

```


#### The second index will be function to update the settings

```javascript

const [styles, updateStyles] = useVariableFont("Rocher", "normal");

updateStyles({SHDW: 100});

```

* Same rules as initial settings

* New settings override previous settings

* passing `normal` resets the variation settings

## Example

```javascript

import React from "react";

import useVariableFont from "react-variable-fonts";

const initialSettings = {

    BVEL: 20,

    SHDW: 50

}

const Demo = () => {

  const [normalStyles] = useVariableFont("Rocher", "normal");

  const [customStyles, updateStyles] = useVariableFont("Rocher", initialSettings);

  const randomSetting = () => Math.floor(Math.random() * 100);

  return (

    <>

      
Hello World

      
Hello Variable Fonts

       updateStyles({ SHDW: randomSetting() })}>

        ▲ bevel

      

    >

  );

};

```