jimthedev-react-with-async-fonts

withAsyncFonts

This is small and flexible module for managing custom loaded fonts. It's designed to work with css modules & css-in-js tools out of the box.

import withAsyncFonts from 'react-with-async-fonts';
 
const openSansFont = {
    family: 'Open Sans',
    class: {
        initial: 'system-font',
        success: 'opensans-font',
    },
};
 
export default withAsyncFonts({ openSansFont })(({ openSansFont }) => (
    <h1 className={openSansFont.class}>Hello!</h1>
));

Full Usage

With basic className

import withAsyncFonts from 'react-with-async-fonts';
 
// Required fonts object
const fonts = {
 
    // Font key will be prop with same name when passed to component
    openSans300: {
 
        // Only required field, should be same as in CSS
        // Fonts can be loaded in any way (e.g. via link or @import)
        family: 'Open Sans',
 
        // Additional font props you can use
        weight: 300,
        style: 'normal',
        stretch: 'normal',
 
        // Class prop for using via `className`
        class: {
            initial: 'system-font',
            success: 'opensans-font',
            // `initial` will be used instead if not set
            fallback: 'system-font',
        },
        styles: {
            initial: {
                fontFamily: 'Arial, Helvetica, sans-serif',
            },
            success: {
                fontFamily: 'Open Sans, sans-serif',
            },
            fallback: {
                // `initial` will be used instead if not set
                fontFamily: '"Comic Sans", cursive',
            },
        },
 
        // `timing` prop will be set for successfully loaded fonts only
        timing: 100,
 
        // You can also provide custom data which will be passed only
        // for successfully loaded font
        fooBar: 42,
    },
};
 
const options = {
 
    // Optional callbacks for handling fonts status
    onFontReady(font) {},
    onFontTimeout(font) {},
 
    // Optional timeout (5s by default), in ms
    timeout: 5000,
};
 
const FooComponent = ({ openSans300 }) => (
    <div className={openSans300.class}>Hello world</div>
);
 
export default withAsyncFonts(fonts, options)(FooComponent);

With React JSS

import React from 'react';
import withAsyncFonts from 'react-with-async-fonts';
import injectSheet from 'react-jss';
 
const fonts = {
    openSansFont: {
        family: 'Open Sans',
        ready: true,
    },
};
 
// Styles with dynamic `fontFamily` prop
const styles = {
    heading: {
        color: 'purple',
        fontSize: 25,
        fontFamily: ({ openSansFont }) => (
            openSansFont.ready ?
            'Open Sans, sans-serif' :
            'Helvetica, Arial, sans-serif'
        ),
    },
};
 
const Heading = ({ classes, children }) => (
    <h1 className={classes.heading}>
        {children}
    </h1>
);
 
// You can compose those HoCs for sure
const HeadingWithFonts = withAsyncFonts(fonts)(Heading);
const HeadingWithStyles = injectSheet(styles)(HeadingWithFonts);
 
export default HeadingWithStyles;

With styled-components

import withAsyncFonts from 'react-with-async-fonts';
import styled from 'styled-components';
 
const fonts = {
    openSansFont: {
        family: 'Open Sans',
        ready: true,
        styles: {
            initial: {
                fontFamily: 'Arial, Helvetica, sans-serif',
            },
            success: {
                fontFamily: 'Open Sans, sans-serif',
            },
            fallback: {
                // `initial` will be used instead if not set
                fontFamily: '"Comic Sans", cursive',
            },
        },
    },
};
 
const Button = styled.button`
    font-family: ${props => props.openSansFont.styles.fontFamily};
    visibility: ${props => (props.openSansFont.ready ? 'visible' : 'hidden')};
    border-radius: 3px;
    padding: 0.25em 1em;
    margin: 0 1em;
    background: transparent;
    color: palevioletred;
    border: 2px solid palevioletred;
`;
 
export default withAsyncFonts(fonts)(Button);
 

License

MIT