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

); }; ```