Fontizer

Small react helper to let users handle your fonts display

Demo

How to use it

Install the package

yarn add fontizer

Prepare your CSS file, by adding these base values to your CSS :root element

--base-font-size: 16px;
--base-font-weight: 300;

Then load Fontizer on your page, it can take 3 props:

• The position one that will position it ( in the corners ).
• A callback function that returns the new values in an array [16, 300]
• A variables props, which take an object with {size: '--new-variable-name', weight: '--new-variable-name'}

Note that if you decide to go with custom variable names, you MUST provide both size & weight variables

import { Fontizer } from "fontizer";

<Fontizer
  position="bl"
  callback={(value) => console.log(`values changed ${value}`)}
  variables={{ size: "--foo-bar-size", weight: "--foo-bar-weight" }}
/>;

Props

| prop | type | value | default | description | | --------- | -------- | -------------------------------- | ------------------------------------- | ------------------------------------------------------------------------- | | position | string | 'bl' | 'br' | 'tl' | 'tr' | bl | corner coordinates to position your Fontizer button/panel | | callback | Function | any javascript function | null | Pass a function using the callback returned value, happen on each updates | | variables | object | {size: '--foo', weight: '--bar'} | --base-font-size & --base-font-weight | If needed, you can override the default variables name. |

A sprinkle of CSS?

override the styles

.fontizer-wrapper {
}
.fontizer-button {
}
.fontizer-icon {
}
.fontizer-panel {
}