All files / hooks useFontScaleMode.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1x
1x
 
1x
2x
2x
2x
 
2x
 
2x
2x
2x
 
2x
2x
2x
2x
2x
 
import { useEffect } from "react";
import { useStores } from "./useStores";
 
export const useFontScaleMode = () => {
	const HTML_ATTRIBUTE = "data-font-scheme";
	const NORMAL_VALUE = "default";
	const LARGE_VALUE = "large";
 
	const { fontScale } = useStores();
 
	useEffect(() => {
		const mode = fontScale.isLargeFont ? LARGE_VALUE : NORMAL_VALUE;
		document.documentElement.setAttribute(HTML_ATTRIBUTE, mode);
 
		return () => {
			document.documentElement.removeAttribute(HTML_ATTRIBUTE);
		};
	}, [fontScale.isLargeFont]);
};