1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import { Toggle } from '@components/FormElements';
import { LocalStorage } from '@services/local-storage';
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
const ReduceMotion = () => {
const intl = useIntl();
const [isDeactivated, setIsDeactivated] = useState<boolean>(false);
useEffect(() => {
const initialState = LocalStorage.get('reduced-motion');
if (initialState) setIsDeactivated(initialState === 'true' ? true : false);
}, []);
useEffect(() => {
document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
LocalStorage.set('reduced-motion', `${isDeactivated}`);
}, [isDeactivated]);
const updateState = () => {
setIsDeactivated(!isDeactivated);
};
return (
<Toggle
id="reduced-motion"
label={intl.formatMessage({
defaultMessage: 'Animations:',
description: 'ReduceMotion: toggle label',
id: 'X3PDXO',
})}
leftChoice={intl.formatMessage({
defaultMessage: 'On',
description: 'ReduceMotion: toggle on label',
id: 'qPU/Qn',
})}
rightChoice={intl.formatMessage({
defaultMessage: 'Off',
description: 'ReduceMotion: toggle off label',
id: 'w1nIrj',
})}
value={isDeactivated}
changeHandler={updateState}
/>
);
};
export default ReduceMotion;
|
