jimthedev-react-with-async-fonts
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.1 • Public • Published

    withAsyncFonts

    npm Version Build Status Coverage Status dependencies Status devDependencies Status

    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

    Install

    npm i jimthedev-react-with-async-fonts

    DownloadsWeekly Downloads

    3

    Version

    3.1.1

    License

    MIT

    Last publish

    Collaborators

    • jimthedev