A group of type tester components for a collection. You must first add content for the collection’s type testers through the Fontdue admin.
<fontdue-type-testers
collection-slug="ibm-plex"
default-mode="local"
></fontdue-type-testers>
import TypeTesters from "fontdue-js/TypeTesters";
<TypeTesters
collectionSlug="ibm-plex"
defaultMode="local"
/>
On a server-rendered framework, preload the group in your loader with loadTypeTestersQuery – it takes the same tags/excludeTags filters – and pass the result as preloadedQuery, see lazy versus preloaded:
import TypeTesters, { loadTypeTestersQuery } from "fontdue-js/TypeTesters";
const testers = await loadTypeTestersQuery({ collectionSlug: "ibm-plex" });
<TypeTesters preloadedQuery={testers} />
| Property | Description | Type |
|---|---|---|
autofit |
Set to true to make the sentence 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 | 'true' |
default-mode |
The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, group turns it on | 'local' | 'group' |
collection-id or collection-slug |
Identifier for collection | string Required |
tags |
Comma-separated list of tags. Will render only type testers that include these tags | string |
truncate |
Caps every tester’s paragraph in this collection at a number of lines, e.g. truncate="15". The cap stays in place while a visitor edits the text. truncate="true" is a one-line preview that opens to the full paragraph when clicked, and truncate="false" turns it off. Add a second word to say what kind of cap it is: truncate="15 expandable" caps at 15 lines but still opens to the full paragraph when clicked, and truncate="15 fixed" spells out the default. Omit it to use the site’s truncate config. |
string |
exclude-tags |
Commas-separate list of tags to exclude. Will exclude type testers that include these tags | string |
| Prop | Description | Type |
|---|---|---|
autofit |
Set to true to make the sentence 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 | boolean |
defaultMode |
The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, group turns it on | 'group' | 'local' |
collectionId or collectionSlug |
Identifier for the collection. Required unless you pass preloadedQuery. |
string |
preloadedQuery |
Server-preloaded data from loadTypeTestersQuery, passed instead of an identifier. |
object |
tags |
Array of tags. Will render only type testers that include these tags | string[] |
excludeTags |
Array of tags to exclude. Will exclude type testers that include these tags | string[] |
truncate |
Caps every tester’s paragraph in this collection at a number of lines, keeping the cap while a visitor edits the text. true is the original one-line preview, which opens on click. The object form – { lines: 20, expandOnFocus: true } – sets both explicitly. Overrides the site’s truncate config. |
boolean | number | object |