import { FontScale } from '@uhg-abyss/mobile';

Usage

Used to conditionally display elements based on the device font scale. The condition is based on the smallerThan or largerThan props (or both of them at the same time).

Smaller Than

Use the smallerThan prop to specify a font scale that the device must be smaller than for the contents inside the FontScale to display.

Larger Than

Use the largerThan prop to specify a font scale that the device must be greater than or equal to for the contents inside the FontScale to display.

Preset Scale Values

As an alternative to using hardcoded number for smallerThan and largerThan, you can use preset scale values to ensure consistency across your app. (Scale values are taken from the app's theme configuration.) Possible values are $xs, $sm, $md, $lg, and $xl.

FontScale Props

Prop Name	Type	Default	Description
children	ReactNode	-	The element the group wraps
largerThan	number | string	-	The value that the font scale must be greater than or equal to in order for the children to render
smallerThan	number | string	-	The value that the font scale must be smaller than in order for the children to render