fontdue-js

v2.9.0

Published

3 months ago

This package exports [Fontdue.js](https://docs.fontdue.com/fontduejs) components for React projects.

Downloads

0High
0Medium
0Low

tomconroy

fontdue-js

This package exports Fontdue.js components for React projects.

Requirements

react >= 18
node >= 16

If using TypeScript, update to >= 4.7 and change your tsconfig.json moduleResolution setting to node16:


{
  "compilerOptions": {
    "moduleResolution": "node16",
  }
}

Installation

npm install fontdue-js@latest

Usage

Wrap the root of your project with the FontdueProvider component. For example in a Next.js app, add it to your app/layout.tsx or pages/_app.tsx.
If using Next.js, add an environment variable to your app NEXT_PUBLIC_FONTDUE_URL pointing to your Fontdue store URL. Otherwise, you can include the url prop on the FontdueProvider.
Render the StoreModal component so that is it available on every page.
Import the fontdue-js/fontdue.css CSS file. (This example uses Next.js)

Example

# .env.local
NEXT_PUBLIC_FONTDUE_URL=https://example.fontdue.com

// app/layout.tsx
import FontdueProvider from "fontdue-js/FontdueProvider";
import StoreModal from "fontdue-js/StoreModal";
import "fontdue-js/fontdue.css";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <FontdueProvider>
          {children}

          <StoreModal />
        </FontdueProvider>
      </body>
    </html>
  );
}

For details on integrating into your Next.js app, read our Next.js guide

IDs

⚠️ Some components accept a collectionId prop. Note this is the id returned from the GraphQL API.

You may alternatively specify a collectionSlug for these components, which can be useful if you are not consuming the GraphQL API. However, we recommend using collectionId when possible.

Components

`FontdueProvider`

The FontdueProvider provides necessary context for all the other Fontdue.js components, so it must be an ancestor of all other components. See example in our guide.

import FontdueProvider from 'fontdue-js/FontdueProvider';

| Prop | Description | | --- | --- | | url | string Your Fontdue store URL, in the form https://your-site.fontdue.com. | | config | object Config object. Refer to the Fontdue.js docs site for available config options. | | components | object Component view overrides. This API will likely change. |

`StoreModal`

Renders the Fontdue cart + checkout experience as a modal. This appears when a user clicks on a BuyButton or the buy button within TypeTesters

import StoreModal from 'fontdue-js/StoreModal';

`BuyButton`

A button which when clicked opens the Cart to the relevant collection, and selects the collection.

Renders a button with the text Buy {collectionName}

import BuyButton from 'fontdue-js/BuyButton';

| Prop | Description | | --- | --- | | collectionId or collectionSlug | (Required) string Collection identifier | | collectionName | (Optional) string The name to render in the button: Buy {collectionName} | | label | (Optional) string Label for the button (defaults to Buy {collectionName}) |

`CartButton`

A button to open the Store Modal. If the user has items in their cart, the button will navigate straight to the Cart screen. Otherwise it opens the fonts index.

import CartButton from 'fontdue-js/CartButton';

| Prop | Description | | --- | --- | | buttonStyle | (Optional) 'icon' \| 'inline' Button style. If left blank, the button is unstyled. | | label | (Optional) string For non-icon style buttons, the text to render inside the button. Defaults to "Cart" |

`CharacterViewer`

An interactive character/glyph explorer.

import CharacterViewer from 'fontdue-js/CharacterViewer';

| Prop | Description | | --- | --- | | collectionId or collectionSlug | (Required) string Identifier for collection |

`CustomerLoginForm`

A form for customers to log in and retrieve their order history. When they enter their email address, they receive a link to a Fontdue-hosted page to view orders.

import CustomerLoginForm from 'fontdue-js/CustomerLoginForm';

| Prop | Description | | --- | --- | | submitLabel | string Label for the submit button, defaults to "Submit" |

`TypeTesters`

A group of type tester components for a collection. You must first add content for the collection's type testers through the Fontdue dashboard.

import TypeTesters from 'fontdue-js/TypeTesters';

| Prop | Description | | --- | --- | | collectionId or collectionSlug | (Required) string Identifier for collection | | defaultMode | (Optional) 'local' \| 'global' The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, global turns it on | | autofit | (Optional) boolean Set to true to make the sentences fit on one line. It will adjust to the width of the tester as the user changes their browser window. If the user changes the font size or edits content, autofitting is turned off for that tester | | tags | (Optional) string[] Will render only type testers that include any of these tags | | excludeTags | (Optional) string[] Will exclude type testers that include any of these tags | | onFocus | (Optional) () => void when any type tester is focused | | onBlur | (Optional) () => void when any type tester is blurred | | onToolbarOpenClose | (Optional) (open: boolean) => void Callback when toolbar is opened/closed |

`TypeTester` (standalone)

Standalone version of the type tester, which does not query the Fontdue CMS for content. You supply the content instead. Does not support the "Affect all styles" feature of the TypeTesters component.

import TypeTester from 'fontdue-js/TypeTester';

| Prop | Description | | --- | --- | | familyName | (Required) string Font family name (must have been already uploaded to your Fontdue admin) | | styleName | (Required) string The name of the style from the family to display. | | fontSize | (Optional) number Initial font size in pixels. | | lineHeight | (Optional) number Line-height as a proportional value where 1 == fontSize. | | content | (Optional) string The initial content to display. | | direction | (Optional) 'ltr' \| 'rtl' Writing direction | | alignment | (Optional) 'left' \| 'center' \| 'right' Text alignment | | features | (Optional) string[] List of opentype feature codes to expose as options to users. (e.g. ['ss01', 'ss02']) | | axes | (Optional) string[] List of variable axes to expose. (e.g. ['wdth', 'ital']). You must provide the relevant variableSettings for each axis | | autofit | (Optional) See TypeTesters.autofit above | | featureSettings | (Optional) { feature: string, value: string }[] List of features already selected, the value should be "1" to mark the feature as selected. The shape of this data is consistent with the TypeTester.featureSettings field in the GraphQL API. e.g. [{ feature: 'ss01', value: '1' }] | | variableSettings | (Optional) { axis: string, value: number }[] List of variable settings selected, consistent with the TypeTester.variableSettings field. e.g. [{ axis: 'wdth', value: 600 }, { axis: 'ital', value: 0.5 }] |

`TestFontsForm`

Displays a form for users to enter their information and download test fonts. Make sure you have configured Test Fonts for this to work.

import TestFontsForm from 'fontdue-js/TestFontsForm';

| Prop | Description | | --- | --- | | agreementLabel | (Optional) string Label for required checkbox. Defaults to the field "EULA agreement text" in your Fontdue Labels settings | | downloadLabel | (Optional) string Download button label. Defaults to "Download test fonts" | | newsletterCheckboxChecked | (Optional) boolean Set the newsletter opt-in checkbox checked by default |

`NewsletterSignup`

A newsletter signup form. Customers entering their information here simply adds them as a Customer in the Fontdue CMS.

import NewsletterSignup from 'fontdue-js/NewsletterSignup';

| Prop | Description | | --- | --- | | optInLabel | (Required) string Label that appears with the checkbox required to be checked. | | buttonLabel | (Optional) string Label for the button. Defaults to "Subscribe" | | optInCheckboxChecked | (Optional) boolean Set the checkbox checked by default. |

`useFontStyle`

A hook to load and render a particular font style. The fallback/loading style is a series of dots rather than any fallback system font.

Note that you must first load the relevant CSS for the font family (ideally in the <head> of your page). You can find the CSS URL by querying the FontCollection.cssUrl field in the Graphql API for the relevant family, or find the HTML code in the Fontdue CMS, under the Webfonts tab of the family. (For superfamilies, you must get load the CSS for each subfamily).

import useFontStyle from 'fontdue-js/useFontStyle';

const FontStyle = ({ familyName, styleName }) => {
  const { style } = useFontStyle({
    fontFamily: `${familyName} ${styleName}`,
    fontWeight: '400',
    fontStyle: 'normal',
  });

  return <span style={style}>The quick brown box</span>;
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

fontdue-js

Requirements

Installation

Usage

Example

IDs

Components

FontdueProvider

StoreModal

BuyButton

CartButton

CharacterViewer

CustomerLoginForm

TypeTesters

TypeTester (standalone)

TestFontsForm

NewsletterSignup

useFontStyle

`FontdueProvider`

`StoreModal`

`BuyButton`

`CartButton`

`CharacterViewer`

`CustomerLoginForm`

`TypeTesters`

`TypeTester` (standalone)

`TestFontsForm`

`NewsletterSignup`

`useFontStyle`