Adds open/close animations to dialogs and modals
This commit is contained in:
parent
fc066e05df
commit
b6cfe0933d
10 changed files with 635 additions and 224 deletions
34
ts/hooks/useReducedMotion.ts
Normal file
34
ts/hooks/useReducedMotion.ts
Normal file
|
@ -0,0 +1,34 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
function getReducedMotionQuery(): MediaQueryList {
|
||||
return window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
}
|
||||
|
||||
// Inspired by <https://github.com/infiniteluke/react-reduce-motion>.
|
||||
export function useReducedMotion(): boolean {
|
||||
const initialQuery = getReducedMotionQuery();
|
||||
const [prefersReducedMotion, setPrefersReducedMotion] = useState(
|
||||
initialQuery.matches
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const query = getReducedMotionQuery();
|
||||
|
||||
function changePreference() {
|
||||
setPrefersReducedMotion(query.matches);
|
||||
}
|
||||
|
||||
changePreference();
|
||||
|
||||
query.addEventListener('change', changePreference);
|
||||
|
||||
return () => {
|
||||
query.removeEventListener('change', changePreference);
|
||||
};
|
||||
});
|
||||
|
||||
return prefersReducedMotion;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue